Зміни класів переходів

несумісно

Огляд

Клас переходу v-enter перейменовано на v-enter-from, а клас переходу v-leave перейменовано на v-leave-from.

Синтаксис 2.x

До v2.1.8 у нас було два класи переходу для кожного напрямку переходу: початковий і активний стани.

У v2.1.8 ми представили v-enter-to, щоб усунути розрив у часі між переходами входу/виходу. Однак для зворотної сумісності ім'я v-enter не було змінено:

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}

Це викликало плутанину, оскільки enter і leave були широкими і не використовували ту саму узгодженість про іменування, що й їхні аналоги хуків класу.

Оновлення 3.x

Щоб зробити це більш чітким і зрозумілим, ми перейменували ці початкові класи стану:

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

Тепер стало набагато зрозуміліше, яка різниця між цими станами.

Також змінено пов'язані назви реквізиту компонента <transition>:

• leave-class перейменовано на leave-from-class (може записуватися як leaveFromClass у функціях рендерингу або JSX)
• enter-class перейменовано на enter-from-class (може записуватися як enterFromClass у функціях рендерингу або JSX)

Стратегія міграції

1. Замініть екземпляри .v-enter на .v-enter-from
2. Замініть екземпляри .v-leave на .v-leave-from
3. Замініть екземпляри пов'язаних імен реквізитів, як зазначено вище.

Дивіться також

• <Transition> як кореневий елемент більше не можна перемикати ззовні
• <TransitionGroup> тепер не рендерить обгортаючий елемент за замовчуванням