Vue.js VueJS列表转换是'；t为列表中的每个元素调用

我有一个行和列中的div网格和一个转换组，如下所示：

{{col}}

单击按钮时，网格将完全更改（在上面的html中未显示）。转换应该缩小删除的.boxdiv，然后放大新添加的.boxdiv

它似乎工作得很好。但是，由于某些原因，一些.boxdiv根本没有设置动画（放大或缩小），它们将消失（删除时）或以100%大小显示（添加时）

看一下这张gif，了解我的意思：

我假设Vue正在重用这些DOM元素，所以它不会对它们应用转换方法

以下是过渡方法：

输入前：函数（el）{
el.style.display='none'；
},
输入：功能（el，完成）{
设置超时（（）=>{
el.style.display='block'；
$（el）.速度({
比例：[1,0.1]，
}, {
持续时间：2400，
完成：完成
});
}, 2400);
},
回车后：函数（el）{}，
离开：功能（el，完成）{
$（el）.速度({
比例：[0.1,1]，
}, {
持续时间：2400，
完成：完成
});
},

我在这里创建了一支钢笔：上面的gif显示了演示

（注意：演示会生成随机数据，因此如果一切正常，请尝试刷新以在其中一个部分中获得更大的网格）。

我假设Vue正在重用这些DOM元素

是的，但问题是：

---

当离开cols计数小于输入cols时，is意味着没有足够的传递组组件，因此一些.boxdiv不能像第一次加载一样发出enter事件。

你明白了吗？我有一个类似的问题。@MSC不幸的是没有，但它看起来像预期的行为。

<div class="col-md-3" v-for="col in row">
 <transition-group >
 </transition-group>
</div>