# トランジションクラスの変更
breaking

# 概要

v-enter トランジションクラスは v-enter-from へ、そして v-leave トランジションクラスは v-leave-from へと名前が変更されました。

v2.1.8 以前では、それぞれのトランジションの方向のために開始状態と活性状態の二つのトランジションクラスを使用していました。

v2.1.8 では v-enter-to トランジションクラスを導入して、 enter/leave トランジション間のタイミングのギャップに対応しました。しかし、後方互換性のために 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 が広義であり、クラスのフックと同じ命名規則を使っていないため、混乱を招いてしまっています。

より明示的で読みやすいように、これらの開始状態クラスの名前を変更しました。

.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 Diagram

<transition> コンポーネントの関連するプロップ名も変更されます。

leave-class は leave-from-class に名前が変更されます。（描画関数や JSX では leaveFromClass と書くことができます）
enter-class は enter-from-class に名前が変更されます。（描画関数や JSX では leaveFromClass と書くことができます）