@@ -18,7 +18,7 @@ Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用
18
18
19
19
## 单元素/组件的过渡
20
20
21
- Vue 提供了 ` transition ` 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡
21
+ Vue 提供了 ` transition ` 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
22
22
23
23
- 条件渲染 (使用 ` v-if ` )
24
24
- 条件展示 (使用 ` v-show ` )
@@ -95,23 +95,23 @@ new Vue({
95
95
96
96
在进入/离开的过渡中,会有 6 个 class 切换。
97
97
98
- 1 . ` v-enter ` :定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除 。
98
+ 1 . ` v-enter ` :定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除 。
99
99
100
- 2 . ` v-enter-active ` :定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 ` transition/animation ` 完成之后移除。这个类可以被用来定义过渡的过程时间 ,延迟和曲线函数。
100
+ 2 . ` v-enter-active ` :定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间 ,延迟和曲线函数。
101
101
102
- 3 . ` v-enter-to ` : ** 2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 ` v-enter ` 被删除),在 ` transition/animation ` 完成之后移除 。
102
+ 3 . ` v-enter-to ` : ** 2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 ` v-enter ` 被移除),在过渡/动画完成之后移除 。
103
103
104
- 4 . ` v-leave ` : 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除 。
104
+ 4 . ` v-leave ` : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除 。
105
105
106
- 5 . ` v-leave-active ` :定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 ` transition/animation ` 完成之后移除。这个类可以被用来定义过渡的过程时间 ,延迟和曲线函数。
106
+ 5 . ` v-leave-active ` :定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间 ,延迟和曲线函数。
107
107
108
- 6 . ` v-leave-to ` : ** 2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 ` v-leave ` 被删除),在 ` transition/animation ` 完成之后移除 。
108
+ 6 . ` v-leave-to ` : ** 2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 ` v-leave ` 被删除),在过渡/动画完成之后移除 。
109
109
110
110
![ Transition Diagram] ( /images/transition.png )
111
111
112
- 对于这些在 ` enter/leave ` 过渡中切换的类名, ` v- ` 是这些类名的前缀。使用 ` <transition name="my-transition"> ` 可以重置前缀,比如 ` v-enter ` 替换为 ` my-transition-enter ` 。
112
+ 对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ` <transition> ` ,则 ` v- ` 是这些类名的默认前缀。如果你使用了 ` <transition name="my-transition"> ` ,那么 ` v-enter ` 会替换为 ` my-transition-enter ` 。
113
113
114
- ` v-enter-active ` 和 ` v-leave-active ` 可以控制 进入/离开 过渡的不同阶段 ,在下面章节会有个示例说明。
114
+ ` v-enter-active ` 和 ` v-leave-active ` 可以控制进入/离开过渡的不同的缓和曲线 ,在下面章节会有个示例说明。
115
115
116
116
### CSS 过渡
117
117
0 commit comments