Изменения в списке VueJS JavaScript Хуки не вызываются для каждого элемента в списке

Question

У меня есть сетка элементов в строках и столбцах и группа переходов следующим образом:

<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 делений, а затем увеличивают только что добавленные .box деления.

Кажется, все работает нормально.Однако по какой-то причине некоторые .box div не анимируются вообще (масштабирование вверх или вниз), и они просто исчезают (при удалении) или появляются в размере 100% (при добавлении).

Посмотрите на этот рисунок, чтобы понять, что я имею в виду:

Я предполагаю, что 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 с демонстрацией, показанной на рисунке выше.

(ПРИМЕЧАНИЕ. Демонстрация генерирует случайные данные, поэтому, если все работает нормально, попробуйте обновить, чтобы получить большую сетку в одном из разделов).

Answer 1

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

Я предполагаю, что Vue повторно использует эти элементы DOM

Да, но проблема заключается в следующем:
Когда столбцы считают меньше, чем enter-cols , означает, что не хватает компонента transitionGroup , поэтому некоторые .box div не могут выдавать вводить событие , как и в первую очередьнагрузка.