版本
2.3.3
复现链接
https://jsfiddle.net/ma7moudat/u82ugj8z/1/
重现步骤
设置一个自动旋转的过渡组，依次显示列表中的项目(如果需要，可以使用滑块)。
预期结果
最后一个项目消失，新项目按照指定的时间间隔出现。
实际发生的情况
一切似乎运行得很好，但是如果你离开窗口大约一分钟(转到另一个标签页或窗口),然后再回来，过渡组就会变得一团糟，因为过渡类不断地被添加到项目上，而没有从项目中移除。
所以你会得到类似这样的结果！<div class="item crossfade-enter-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to crossfade-enter-to crossfade-leave-to .........">
9条答案
按热度按时间qjp7pelc1#
我不认为我们在这里处理的是Vue问题。Chrome/Firefox在不活动的标签页中限制定时器以减少RAM/CPU使用，所以你不能依赖于每隔x秒运行一次setTimeout,就像你想的那样。
解决你问题的简单方法是在用户离开另一个标签页时暂停动画，然后在他回来时重新开始。
vlf7wbxs2#
有道理。非常感谢您的快速回复 :)
但是我仍然要问，当发生更改时，无论transitionend/animationend是否被触发，是否有任何反对检查过渡类是否已经存在的方法？
xggvc2p63#
我认为这个问题不仅发生在标签隐藏时，也发生在标签仍然处于活动状态时。在我向过渡组添加了几个元素后，我得到了以下结果：
文档指出，在过渡完成之后，enter-to类应该被移除。
qvsjd97n4#
请检查this issue,它是否与您的情况有关？
piztneat5#
@jkzing实际上，是的，它似乎也影响到了我。我在enter-active类中放入的所有过渡都不起作用，只有那些在enter-to do中的过渡起作用。我应该把我的例子移到那个问题上吗？
1yjd4xko6#
你好，yunyu。非常感谢你的回复，但是在那篇文章中已经有一个相当清晰的复现过程了。
goucqfw67#
我原本打算创建一个新问题，但发现了这个问题。我的bug不同，但似乎它可能有助于解决当前的问题，因为我已经创建了一个非常简单的情况来重现这个过渡bug。
重现链接：
https://jsfiddle.net/ace7s75e/
重现步骤：
预期结果是什么？ (如果不切换浏览器标签页，它会这样工作)
实际上发生了什么？
在点击“显示/隐藏”按钮并在那些2秒内切换到另一个浏览器标签页期间——当你回来时，你将看不到消息，因为在
class="fade-leave-to"元素中有<p>。pkwftd7m8#
我认为您的情况是一个不同的情况，为您创造了一个单独的问题：#7411
NVM,您正处于第5800条(评论)所说的情况，抱歉发送垃圾邮件...😂
4ngedf3f9#
关于这个问题的更新？
我正在构建一个Chrome扩展，当标签页不活动时点击按钮。
由于这个问题，一些元素没有显示出来。标签页不活动 -> 动画未完成。
我希望能找到一个解决方法👍