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
Copy file name to clipboardExpand all lines: source/guide/transitions.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -124,22 +124,22 @@ new Vue({
124
124
125
125
The classes being added and toggled are based on the value of your `v-transition` directive. In the case of `v-transition="fade"`, the class `.fade-transition` will be always present, and the classes `.fade-enter` and `.fade-leave` will be toggled automatically at the right moments. When no value is provided they will default to `.v-transition`, `.v-enter` and `.v-leave`.
126
126
127
-
When the `show` property changes, Vue.js will insert or remove the `<p>` element accordingly, and apply transition classes as specified below:
127
+
When the `show` property changes, Vue.js will insert or remove the `<div>` element accordingly, and apply transition classes as specified below:
128
128
129
129
- When `show` becomes false, Vue.js will:
130
130
1. Call `beforeLeave` hook;
131
131
2. Apply `v-leave` class to the element to trigger the transition;
132
132
3. Call `leave` hook;
133
133
4. Wait for the transition to finish; (listening to a `transitionend` event)
134
-
5. Remove the element from the DOM and remove `v-leave` class.
134
+
5. Remove the element from the DOM and remove `v-leave` class;
135
135
6. Call `afterLeave` hook.
136
136
137
137
- When `show` becomes true, Vue.js will:
138
138
1. Call `beforeEnter` hook;
139
139
2. Apply `v-enter` class to the element;
140
140
3. Insert it into the DOM;
141
141
4. Call `enter` hook;
142
-
5. Force a CSS layout so `v-enter` is actually applied, then remove the `v-enter` class to trigger a transition back to the element's original state.
142
+
5. Force a CSS layout so `v-enter` is actually applied, then remove the `v-enter` class to trigger a transition back to the element's original state;
143
143
6. Wait for the transition to finish;
144
144
7. Call `afterEnter` hook.
145
145
@@ -169,7 +169,7 @@ enter: function (el, done) {
169
169
170
170
## CSS Animations
171
171
172
-
CSS animations are applied in the same way with CSS transitions, the difference being that `v-enter` is not removed immediately after the element is inserted, but on an `animationend`callback.
172
+
CSS animations are applied in the same way with CSS transitions, the difference being that `v-enter` is not removed immediately after the element is inserted, but on an `animationend`event.
0 commit comments