From bab0430d4733ffcbe7b63fb5f70c8d1a906c2db0 Mon Sep 17 00:00:00 2001 From: StanJ Date: Thu, 12 Apr 2018 19:04:53 +0800 Subject: [PATCH 1/2] modify the descriptions of transiton classes to modify the descriptions of transiton classes --- src/v2/guide/transitions.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 4a53ad4f0..6d452b3bd 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -95,17 +95,17 @@ new Vue({ 在进入/离开的过渡中，会有 6 个 class 切换。 -1. `v-enter`：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 +1. `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -2. `v-enter-active`：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 +2. `v-enter-active`：定义进入过渡生效时的状态。在整个进入阶段中应用，在元素被插入之前生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 `v-enter` 被删除)，在 `transition/animation` 完成之后移除。 +3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在 `transition/animation` 完成之后移除。 -4. `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 +4. `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -5. `v-leave-active`：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 +5. `v-leave-active`：定义离开过渡生效时的状态。在整个离开阶段中应用，在离开过渡被触发时立刻生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 `v-leave` 被删除)，在 `transition/animation` 完成之后移除。 +6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在 `transition/animation` 完成之后移除。 ![Transition Diagram](/images/transition.png) From cb6c1099310329378dbcc9dbf54d5264053131b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Thu, 26 Apr 2018 08:40:10 +0800 Subject: [PATCH 2/2] Update transitions.md --- src/v2/guide/transitions.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 6d452b3bd..d6dbe7579 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -18,7 +18,7 @@ Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用 ## 单元素/组件的过渡 -Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡 +Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 - 条件渲染 (使用 `v-if`) - 条件展示 (使用 `v-show`) @@ -97,21 +97,21 @@ new Vue({ 1. `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -2. `v-enter-active`：定义进入过渡生效时的状态。在整个进入阶段中应用，在元素被插入之前生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 +2. `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在 `transition/animation` 完成之后移除。 +3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。 4. `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -5. `v-leave-active`：定义离开过渡生效时的状态。在整个离开阶段中应用，在离开过渡被触发时立刻生效，在 `transition/animation` 完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 +5. `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在 `transition/animation` 完成之后移除。 +6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。 ![Transition Diagram](/images/transition.png) -对于这些在 `enter/leave` 过渡中切换的类名，`v-` 是这些类名的前缀。使用 `` 可以重置前缀，比如 `v-enter` 替换为 `my-transition-enter`。 +对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ``，则 `v-` 是这些类名的默认前缀。如果你使用了 ``，那么 `v-enter` 会替换为 `my-transition-enter`。 -`v-enter-active` 和 `v-leave-active` 可以控制 进入/离开 过渡的不同阶段，在下面章节会有个示例说明。 +`v-enter-active` 和 `v-leave-active` 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。 ### CSS 过渡