版本
2.5.16(但我也检查了2.5.5版本)
复现链接
https://jsfiddle.net/bpkpz6v6/
重现步骤
- 添加3个项目。您可以看到每个项目的动画✅
- 以以下顺序删除项目：3 -> 2 -> 1
- 再次添加3个项目。这次，项目1的动画没有被应用❌
- 以相反的顺序删除项目：1 -> 2 -> 3
- 再次添加项目。动画再次正常工作✅
预期结果是什么？
每次都能过渡工作
实际发生的情况是什么？
当在被停用后激活transition-group内的keep-alive时，有时它不会对第一个渲染的元素应用过渡。
2条答案
按热度按时间bz4sfanl1#
我刚刚注意到，当我在移除一个项目后不重置id计数器($x_1^m_0^n_1^x$)时，它可以正常工作。
这意味着，每次从集合中移除一个元素时，我们都需要确保重置$x_1^m_0^n_1^x$的值。这样，当我们再次尝试添加一个具有相同id的新元素时，就不会再出现问题。
omqzjyyz2#
我认为这是因为
v-if。它在组件渲染为空列表的项目之前触发。当你添加一个新项目时，它会响应，但该项目已经存在，所以没有发生动画。理想情况下，你应该在过渡完成后再停用组件。如果你保持组件的激活状态，那么在使用 v-show 而不是 keep-alive 不是更有意义吗？