diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index a982b29e8..94f48ec13 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -1,11 +1,11 @@ # 进入过渡 & 离开过渡 -在插入、更新或从DOM中移除项时,Vue提供了多种应用转换效果的方法。这包括以下工具: +在插入、更新或从 DOM 中移除项时,Vue 提供了多种应用转换效果的方法。这包括以下工具: -- 自动为CSS转换和动画应用class; -- 集成第三方CSS动画库,例如 [animate.css](https://animate.style/) ; -- 在过渡钩子期间使用JavaScript直接操作DOM; -- 集成第三方JavaScript动画库。 +- 自动为 CSS 转换和动画应用 class; +- 集成第三方 CSS 动画库,例如 [animate.css](https://animate.style/) ; +- 在过渡钩子期间使用 JavaScript 直接操作 DOM; +- 集成第三方 JavaScript 动画库。 在这里,我们只会讲到进入、离开和列表的过渡,你也可以看下一节的[管理过渡状态](transitions-state.html) 。 @@ -152,7 +152,7 @@ Vue.createApp(Demo).mount('#demo') CSS 动画用法同 CSS 过渡,区别是在动画中 `v-enter-from` 类名在节点插入 DOM 后不会立即删除,而是在 `animationend` 事件触发时删除。 -下面是一个例子,为了简洁起见,省略了带前缀的CSS规则: +下面是一个例子,为了简洁起见,省略了带前缀的 CSS 规则: ```html
@@ -206,7 +206,7 @@ Vue.createApp(Demo).mount('#demo')

-### 自定义过渡class类名 +### 自定义过渡 class 类名 我们可以通过以下 attribute 来自定义过渡类名: @@ -351,7 +351,7 @@ methods: { 当只用 JavaScript 过渡的时候,在 **`enter` 和 `leave` 钩中必须使用 `done` 进行回调**。否则,它们将被同步调用,过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 `:css="false"`,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。 -现在让我们来看一个例子。下面是一个使用 [GreenSock](https://greensock.com/) 的JavaScript 过渡: +现在让我们来看一个例子。下面是一个使用 [GreenSock](https://greensock.com/) 的 JavaScript 过渡: ```html @@ -439,7 +439,7 @@ Vue.createApp(Demo).mount('#demo') ## 多个元素的过渡 -我们之后讨[论多个组件的过渡](#transitioning-between-components),对于原生标签可以使用 `v-if`/`v-else`。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: +我们之后讨论[多个组件的过渡](#transitioning-between-components),对于原生标签可以使用 `v-if`/`v-else`。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: ```html @@ -450,10 +450,10 @@ Vue.createApp(Demo).mount('#demo') ``` -实际上,通过使用多个 `v-if` 或将单个元素绑定到一个动态property,可以在任意数量的元素之间进行过渡。例如: +实际上,通过使用多个 `v-if` 或将单个元素绑定到一个动态 property,可以在任意数量的元素之间进行过渡。例如: -TODO: 重写示例并放入codepen示例 +TODO: 重写示例并放入 codepen 示例 ```html @@ -503,9 +503,9 @@ computed: {

-在“on”按钮和“off”按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 `` 的默认行为 - 进入和离开同时发生。 +在“on”按钮和“off”按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 `` 的默认行为 —— 进入和离开同时发生。 -有时这很有效,例如当过渡项绝对位于彼此的top时: +有时这很有效,例如当过渡项绝对位于彼此的 top 时:

See the Pen @@ -523,7 +523,7 @@ computed: { 很快就会发现 `out-in` 是你大多数时候想要的状态 :) ::: -现在让我们用 `out-in` 更新on/off按钮的转换: +现在让我们用 `out-in` 更新 on/off 按钮的转换: ```html @@ -538,9 +538,9 @@ computed: {

-通过添加一个attribute,我们修复了原来的过渡,而不必添加任何特殊style。 +通过添加一个 attribute,我们修复了原来的过渡,而不必添加任何特殊 style。 -我们可以用它来协调更具表现力的动作,例如折叠卡片,如下所示。实际上是两个元素在彼此之间转换,但是由于开始状态和结束状态的比例是相同的:水平为0,它看起来就像一个流体运动。这种轻描淡写对于真实的UI微交互非常有用: +我们可以用它来协调更具表现力的动作,例如折叠卡片,如下所示。实际上是两个元素在彼此之间转换,但是由于开始状态和结束状态的比例是相同的:水平为0,它看起来就像一个流体运动。这种轻描淡写对于真实的 UI 微交互非常有用:

See the Pen @@ -551,9 +551,9 @@ computed: { ## 多个组件之间过渡 -组件之间的过渡更简单 —— 我们甚至不需要 `key` 属性。相反,我们包装了一个 [动态组件](component-basics.html#动态组件) : +组件之间的过渡更简单 —— 我们甚至不需要 `key` 属性。相反,我们包装了一个[动态组件](component-basics.html#动态组件) : -TODO: 更新到Vue 3 +TODO: 更新到 Vue 3 ```html