vue.js - VueJS List Transitions JavaScript Hooks 并没有被列表中的每个元素调用

Question

我在行和列中有一个 div 网格和一个过渡组，如下所示:

<div class="row" v-for="row in grid">
    <div class="col-md-3" v-for="col in row">
        <transition-group 
                    v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:after-enter="afterEnter"
                    v-on:leave="leave"
                    v-bind:css="false">
            <div class="box" :key="col">{{col}}</div>
        </transition-group>
    </div>
</div>

单击按钮时网格会完全改变(上面的 html 中未显示)。过渡应该缩小删除的 .box div，然后放大新添加的 .box div。

它似乎工作正常。然而，出于某种原因，一些 .box div 根本没有动画(放大或缩小)，它们只会消失(删除时)或以 100% 大小显示(添加时)。

看看这个 gif 就知道我的意思了:

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

这里是过渡方法:

beforeEnter: function (el) {
    el.style.display = 'none';
},
enter: function (el, done) {
    setTimeout(() => {
        el.style.display = 'block';
        $(el).velocity({
            scale: [1, 0.1],
        }, {
            duration: 2400,
            complete: done
        });
    }, 2400);
},
afterEnter: function (el) {},
leave: function (el, done) {
    $(el).velocity({
        scale: [0.1, 1],
    }, {
        duration: 2400,
        complete: done
    });
},

我在这里创建了一支笔:https://codepen.io/anon/pen/WajaOE使用上面 gif 中显示的演示。

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

Answer 1

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

I am assuming Vue is reusing these DOM elements

是的，但问题是:
当leave-cols 计数少于enter-cols 时，表示transitionGroup 组件 不足，因此一些.box div 不能像第一次加载那样发出 enter 事件。