Как отключить переход-группу только при загрузке страницы?

Question

У меня есть группа перехода, которая отображает элемент div, и внутри него находится компонент с атрибутом v-for, который отображает несколько элементов. Затем у меня есть кнопка, которая добавляет новый элемент в начало массива. Этот переход работает отлично.

Единственное, что мне не нравится, это то, что весь список загружается с переходом при загрузке страницы, и я хотел бы отключить его только при загрузке страницы. Я искал Stack и Google, но не мог найти способ. Есть ли способ сделать это, чтобы переходы по-прежнему работали при нажатии кнопки, но отключены для загрузки страницы?

<transition-group
    name="item-list"
    tag="div">
    <item-row
        v-for="item in items"
        :key="item.id"
        :item="item" />
</transition-group>



.item-list-enter-active,
.item-list-leave-active,
.item-list-move {
    transition         : 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
    transition-property: opacity, transform;
}

.item-list-enter {
    opacity  : 0;
    transform: translateX(50px) scaleY(0.5);
}

.item-list-enter-to {
    opacity  : 1;
    transform: translateX(0) scaleY(1);
}

.item-list-leave-active {
    position: absolute;
}

.item-list-leave-to {
    opacity         : 0;
    transform       : scaleY(0);
    transform-origin: center top;
}

Answer 1

Хотелось бы, чтобы я нашел более "Vue-y" способ справиться с этим, однако в итоге я пошел по этому маршруту . По сути, я добавил класс к телу и удалил все переходы. Затем на жизненном цикле created моего компонента я удаляю этот класс. Это удаляет переход при загрузке страницы, но сохраняет переход при нажатии кнопки, как я хочу.

Answer 2

Вам необходимо привязать продолжительность для группы переходов

шаблон:

<transition-group
    :duration="duration"
    name="item-list"
    tag="div">
    <item-row
        v-for="item in items"
        :key="item.id"
        :item="item" />
</transition-group>

скрипт:

data() {
    return {
        duration: 0,
        items: [
            {id: 1},
            {id: 2}
        ]
    }
},
methods: {
    add() {
        if(this.duration===0) this.duration = 250
        this.items.push({id: 'xxx'})
    }
}