# Transition Class Change
breaking
# Overview
The v-enter transition class has been renamed to v-enter-from and the v-leave transition class has been renamed to v-leave-from.
# 2.x Syntax
Before v2.1.8, we had two transition classes for each transition direction: initial and active states.
In v2.1.8, we introduced v-enter-to to address the timing gap between enter/leave transitions. However, for backward compatibility, the v-enter name was untouched:
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
This became confusing, as enter and leave were broad and not using the same naming convention as their class hook counterparts.
# 3.x Update
In order to be more explicit and legible, we have now renamed these initial state classes:
.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
2
3
4
5
6
7
8
9
It's now much clearer what the difference between these states is.
The <transition> component's related prop names are also changed:
leave-classis renamed toleave-from-class(can be written asleaveFromClassin render functions or JSX)enter-classis renamed toenter-from-class(can be written asenterFromClassin render functions or JSX)
# Migration Strategy
- Replace instances of
.v-enterto.v-enter-from - Replace instances of
.v-leaveto.v-leave-from - Replace instances of related prop names, as above.