# Переименованы некоторые классы transition
breaking

# Обзор

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

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

До версии 2.1.8 было два класса для каждого направления перехода: начальное и активное состояния.

В версии 2.1.8, мы добавили v-enter-to для решения проблемы с временным интервалом между переходами появления/исчезновения. Но для обратной совместимости v-enter остался нетронутым:

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

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

1
2
3
4
5
6
7
8
9

Это добавило путаницы, так как enter и leave имели более широкое понимание и не использовали то же самое соглашение по именованию, как аналоги других классов хуков.

# Что изменилось в 3.x

Чтобы внести явность, теперь были переименованы эти классы начального состояния:

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

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

1
2
3
4
5
6
7
8
9

Теперь намного понятнее, в чём заключается разница между этими состояниями.

Диаграмма переходов

Связанные с этим входные параметры компонента <transition> также изменяются:

leave-class переименован в leave-from-class (может быть записан как leaveFromClass в render-функциях или JSX)
enter-class переименован в enter-from-class (может быть записан как enterFromClass в render-функциях или JSX)

# Стратегия миграции

Заменить случаи использования .v-enter на .v-enter-from
Заменить случаи использования .v-leave на .v-leave-from
Заменить случаи использования связанных входных параметров, как указано выше.

# См. также

<transition-group> теперь не имеет корневого элемента по умолчанию

← Suspense Корневой элемент transition-group больше не создаётся →