版本
2.3.3
复现链接
http://jsbin.com/fegogus/edit?html,css,js,output
重现步骤
在使用流行的CSS框架(如Semantic-UI)时，将过渡组应用于v-for。示例使用表格行，但问题也出现在更简单的东西上，如无序列表。
预期结果是什么？
过渡组的性能应与不应用任何CSS时相同。
实际发生的情况是什么？
更新延迟相当大，特别是在使用slice更改v-for数组时。这显然是在VueJS问题和涉及的框架之间的一个问题之间徘徊。我在这里打开了一个案例，因为老实说，我不知道Semantic-UI方面的任何人是否能提供帮助。
示例比需要的复杂得多，以便简单地复现问题，因为我想展示我的用例——这是对v-for使用的数组进行动画添加，但除此之外没有过渡。这是因为表格也将被分页(切片)或排序，我不想对这个过程进行动画处理。
在示例中，您可以使用transition-group开关进行切换。没有过渡组时，DOM更新会立即发生。当它打开时，即使没有任何活动过渡，您可以看到在切片和完整数组之间切换非常慢地更新可见DOM。
另外，很抱歉提交了三次，新的Vue站点在Chrome上做了一些奇怪的事情，不得不切换到Safari。
8条答案
按热度按时间fykwrbwg1#
这似乎是Chrome的唯一问题。在Firefox上运行正常。
laawzig22#
我在Windows和macOS的Firefox中仍然可以看到它。还尝试了Chrome Canary和Firefox beta频道。如果你关闭过渡组，然后使用那里的其他按钮切片数组，这是非常明显的。
zbdgwd5y3#
深入研究一下。看起来，对于过渡来说，有一个动态的
name会大大增加延迟感。设置name="fade"会有很大改善。看起来有些东西在使用过多组件的同时编辑内联样式，而只有一个应该被动画化(我可能错了)
1u4esq0p4#
我猜动态名称会增加一些延迟，但是如果你完全移除名称，或者设置一个没有任何过渡效果的样式，仍然会有一个相当明显的暂停。这在更复杂的v-for中表现得更为明显。例如，我的应用程序中的表格有更多的数据和其他生成表格的功能，显示延迟是一个相当大的遗憾。
由于我实际上并不对整个列表进行动画化，我可能会尝试看看是否有办法仅对添加的部分进行动画化，而不是将v-for Package 在一个过渡组中。
4ngedf3f5#
我的观察是，
transition-group默认启用了翻转技术。然而，它至少需要调用一次getBoundingClientRect。来源：https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/components/transition-group.js#L65。这会强制重新计算样式和布局重排。如下图所示。
通常对于小型样式表来说，这代价很小，但是对于一个完整的CSS框架来说，重新计算样式的代价太高了。
rjee0c156#
我认为在Vue框架中，这个问题无法修复。我尝试了一些方法来优化
getBoundingClientRect的调用，但这需要getTransformationInfo,从而导致样式重新计算。由于transition-group是专门为FLIP技术设计的，我们至少无法避免一次样式重新计算调用。实际上，即使CPU减速20倍，点击事件监听器仍然在大约100毫秒内响应，这似乎可以接受。如果CSS框架添加了太多规则，那么FLIP技术可能是你想要避免的东西。
uqzxnwby7#
感谢您进一步调查，这个解释是有道理的。即使没有应用任何特定的类，很明显Semantic-UI和其他库正在直接更改元素，如body、text等。因此导致了重新计算负载。
ej83mcc08#
我与Bulma也有同样的问题。