トランジションクラスの変更
破壊的変更

概要

v-enter トランジションクラスは v-enter-from に名称変更され、v-leave トランジションクラスは v-leave-from に名称変更されました。

v2.1.8 以前は、トランジションの方向ごとに 2 つの遷移クラス（初期状態と活性状態）がありました。

v2.1.8 で、enter/leave のトランジション間のタイミングギャップに対応するため、v-enter-to を導入しました。しかし、後方互換性のために、v-enter という名前はそのまま残されています:

css

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

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

enter と leave は幅広く、対応するクラスフックと同じ命名規則を使っていないため、これは混乱を招きました。

より明示的で分かりやすくするために、これらの初期状態クラスの名前を変更しました:

css

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

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

これらの状態の違いがより明確になりました。

Transition Diagram

また、<transition> コンポーネントの関連プロパティの名前も変更されました:

leave-class は leave-from-class に名称変更されます（レンダー関数や JSX では leaveFromClass と記述できます）
enter-class は enter-from-class に名称変更されます（レンダー関数や JSX では enterFromClass と記述できます）