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

Question

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

Единственное, что мне не нравится, так это то, что весь список загружается с переходом при загрузке страницы, и я бы хотел отключить его только при загрузке страницы. Я искал в стеке и в 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

На случай, если кто-нибудь столкнется с этим, как я.

В итоге я добился этого, добавив к данным флаг «transitionsOn» (казалось, не имеет значения, для чего он был инициализирован) и вычисленное имя для перехода, т.е.

      <transition-group :name="transitionName">

в вычислении, которое у меня тогда было, для перехода под названием «вспышка»

          computed: {
        transitionName() {
           return this.transitionsOn ? 'flash' : 'disabled';
        },
    },

Затем я установил this.transitionsOn = true, когда хотел, чтобы он сработал.

Пришлось много возиться, чтобы понять это, но, похоже, работает нормально

Answer 3

Вы можете динамически изменятьnameзначение группы перехода. Возможно, при загрузке страницы значение отличается от значения, которое имеет правильное имя класса, на которое нацелен CSS. Затем вmountedкрючок жизненного цикла, вы можете изменить его обратно на правильное имя класса.

Answer 4

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

шаблон:

<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'})
    }
}