Vue.js

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

# Обзор

Класс перехода 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)

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

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

# См. также

← Использование transition корневым элементом →