You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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`.
12
+
13
+
## 2.x Syntax
14
+
15
+
Before v2.1.8, we had two transition classes for each transition direction: initial and active states.
16
+
17
+
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:
18
+
19
+
```css
20
+
.v-enter,
21
+
.v-leave-to {
22
+
opacity: 0;
23
+
}
24
+
25
+
.v-leave,
26
+
.v-enter-to {
27
+
opacity: 1;
28
+
}
29
+
```
30
+
31
+
This became confusing, as _enter_ and _leave_ were broad and not using the same naming convention as their class hook counterparts.
32
+
33
+
## 3.x Update
34
+
35
+
In order to be more explicit and legible, we have now renamed these initial state classes:
36
+
37
+
```css
38
+
.v-enter-from,
39
+
.v-leave-to {
40
+
opacity: 0;
41
+
}
42
+
43
+
.v-leave-from,
44
+
.v-enter-to {
45
+
opacity: 1;
46
+
}
47
+
```
48
+
49
+
It's now much clearer what the difference between these states is.
50
+
51
+
The `<transition>` component's related prop names are also changed:
52
+
53
+
-`leave-class` is renamed to `leave-from-class` (can be written as `leaveFromClass` in render functions or JSX)
54
+
-`enter-class` is renamed to `enter-from-class` (can be written as `enterFromClass` in render functions or JSX)
55
+
56
+
## Migration Strategy
57
+
58
+
1. Replace instances of `.v-enter` to `.v-enter-from`
59
+
2. Replace instances of `.v-leave` to `.v-leave-from`
60
+
3. Replace instances of related prop names, as above.
0 commit comments