diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index cc8cf5daa..e98619987 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -1,19 +1,19 @@ # 过渡 & 动画概述 -Vue 提供了一些抽象，可以帮助处理过渡和动画，特别是在对变化的响应中。其中一些摘要包括： +Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括： -- 在 CSS 和 JS 中，使用内置的 `` 组件来钩住进入和离开 DOM 的组件。 -- 过渡模式，以便你可以在过渡期间协调顺序。 -- 钩子用于多个元素更新到位时，使用 `` 组件中，在 FLIP 技术下使用钩子以提高性能。 -- 使用 `watchers` 过渡应用程序中的不同状态。 +- 在 CSS 和 JS 中，使用内置的 `` 组件来钩住组件中进入和离开 DOM。 +- 过渡模式，以便你在过渡期间编排顺序。 +- 在处理多个元素位置更新时，使用 `` 组件，通过 FLIP 技术来提高性能。 +- 使用 `watchers` 来处理应用中不同状态的过渡。 -我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了这些有用的 API 之外，值得一提的是，对于更简单的用例，我们前面介绍的 class 和 style 声明也可以用于应用动画和 transtion。 +我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了提供这些有用的 API 之外，值得一提的是，我们前面介绍的 class 和 style 声明也可以应用于动画和过渡，用于更简单的用例。 -在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并链接到一些资源以进行进一步的研究。如果你已经熟悉 web 动画，以及这些原则如何与 Vue 的某些指令配合使用，请跳过下一节。如果其他人想在深入了解网络动画基础知识之前，继续阅读。 +在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。对于希望在开始学习之前进一步了解网络动画基础知识的其他人，请继续阅读。 ## 基于 class 的动画和过渡 -尽管 `` 组件对于组件的进入和离开非常有用，但是你也可以通过添加一个条件 class 来激活动画，而无需挂载组件。 +尽管 `` 组件对于组件的进入和离开非常有用，但你也可以通过添加一个条件 class 来激活动画，而无需挂载组件。 ```html
@@ -79,7 +79,7 @@ Vue.createApp(Demo).mount('#demo') ## 过渡与 Style 绑定 -一些过渡影响可以通过插值来应用，例如在交互发生时将样式绑定到元素。以这个例子为例： +一些过渡效果可以通过插值的方式来实现，例如在发生交互时将样式绑定到元素上。以这个例子为例： ```html
@@ -124,28 +124,28 @@ Vue.createApp(Demo).mount('#demo')

-在这个例子中，我们通过使用插值来创建动画，附加到鼠标的移动上。CSS 过渡也应用于元素，让元素知道在更新时要使用什么 easing。 +在这个例子中，我们是通过使用插值来创建动画，将触发条件添加到鼠标的移动过程上。同时将 CSS 过渡属性应用在元素上，让元素知道在更新时要使用什么过渡效果。 ## 性能 -你可能注意到上面显示的动画使用了 `transforms` 之类的东西，并应用了诸如 `perspective` 之类的奇怪属性——为什么它们是这样构建的，而不是仅仅使用 `margin` 和 `top` 等？ +你可能注意到上面显示的动画使用了 `transforms` 之类的东西，并应用了诸如 `perspective` 之类的奇怪的 property——为什么它们是这样实现的，而不是仅仅使用 `margin` 和 `top` 等？ -通过对性能的了解，我们可以在网络上创建非常流畅的动画。我们希望尽可能用硬件加速元素，并使用不触发重绘的属性。让我们来回顾一下我们如何做到这一点。 +我们可以通过对性能的了解，在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。 ### Transform 和 Opacity -我们可以检查资源，比如 [CSS Triggers](https://csstriggers.com/) 以查看如果我们设置了动画，哪些属性将触发重绘。在这里，如果你在 `transform` 下查看，你将看到： +我们可以通过工具，例如 [CSS Triggers](https://csstriggers.com/) 来查看哪些属性会在动画时触发重绘。在工具中，查看 `transform` 的相关内容，你将看到： -> 更改 transform 不会触发任何几何体更改或绘制，这非常好。这意味着该操作可以由合成器线程在 GPU 的帮助下执行。 +> 非常好的是，更改 transform 不会触发任何几何形状变化或绘制。这意味着该操作可能是由合成器线程在 GPU 的帮助下执行。 -不透明度的行为类似。因此，他们是网络运动的理想人选。 +`opacity` 属性的行为也类似。因此，他们是在 web 上做元素移动的理想选择。 ### 硬件加速 -诸如 `perspective`、`backface-visibility` 和 `transform:translateZ(x)` 等 property 将允许浏览器知道你需要硬件加速。 +诸如 `perspective`、`backface-visibility` 和 `transform:translateZ(x)` 等 property 将让浏览器知道你需要硬件加速。 -如果要对元素进行硬件加速，可以应用以下任何 property (并不是都必需，仅一个)： +如果要对一个元素进行硬件加速，可以应用以下任何一个 property (并不是需要全部，任意一个就可以)： ```css perspective: 1000px; @@ -153,19 +153,19 @@ backface-visibility: hidden; transform: translateZ(0); ``` -许多像 GreenSock 这样的 JS 库都会假设你需要硬件加速，并在默认情况下应用它们，所以你不需要手动设置它们。 +许多像 GreenSock 这样的 JS 库都会默认你需要硬件加速，并在默认情况下应用，所以你不需要手动设置它们。 ## Timing -对于简单的 UI 转换，即从一个状态到另一个没有中间状态的状态，通常使用 0.1s 到 0.4s 之间的计时，大多数人发现 0.25s 是一个最佳选择。你能用这个时间做任何事情吗？不，不是。如果你有一些东西需要移动更大的距离，或者有更多的步骤或状态变化，0.25s 是不起作用的，你必须要有更多的目的性，而且时间需要更加独特。但这并不意味着你不能在应用程序中重复使用好的默认值。 +对于简单 UI 过渡，即从一个状态到另一个没有中间状态的状态，通常使用 0.1s 到 0.4s 之间的计时，大多数人发现 *0.25s* 是一个最佳选择。你能用这个定时做任何事情吗？并不是。如果你有一些元素需要移动更大的距离，或者有更多的步骤或状态变化，0.25s 并不会有很好的效果，你将不得不有更多的目的性，而且定时也需要更加独特。但这并不意味着你不能在应用中重复使用效果好的默认值。 -你也可能会发现入口看起来比出口的时间稍微长一些。用户通常是在入口时被引导的，而在出口时耐心一点，因为他们想继续前进。 +你也可能会发现，起始动画比结束动画的时间稍长一些，看起来会更好一些。用户通常是在动画开始时被引导的，而在动画结束时没有那么多耐心，因为他们想继续他们的动作。 ## Easing -Easing 是在动画中传达深度的重要方式。动画新手最常犯的一个错误是在入口使用 `ease-in`，在出口使用 `ease-out`。你实际上需要的是反过来。 +Easing 是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 `ease-in`，在结束动画节点使用 `ease-out`。实际上你需要的是反过来的。 -如果我们将这些状态应用于过渡，它会看起来像这样： +如果我们将这些状态应用于过渡，它应该像这样： ```css .button { @@ -188,7 +188,7 @@ Easing 是在动画中传达深度的重要方式。动画新手最常犯的一

-Easing 也可以传达动画素材的质量。以下面的 Pen 为例，你认为哪个球硬而哪个软？ +Easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认为哪个球是硬的，哪个球是软的？

See the Pen @@ -197,15 +197,15 @@ Easing 也可以传达动画素材的质量。以下面的 Pen 为例，你认

-你可以得到很多独特的效果，并使你的动画非常时尚，通过调整你的放松。CSS 允许你通过调整立方 bezier 属性来修改它，Lea Verou 的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这一点非常有帮助。 +你可以通过调整你的 Easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier 属性来修改 Easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 -虽然使用 cubic-bezier ease 提供的两个控制柄可以为简单的动画获得很好的效果，但是 JavaScript 允许多个控制柄，因此允许更多的变化。 +虽然使用 cubic-bezier ease 提供的两个控制柄可以为简单的动画获得很好的效果，但是 JavaScript 允许多个控制柄，以此支持更多的变化。 ![Ease 比较](/images/css-vs-js-ease.svg) -比如说弹跳。在 CSS 中，我们必须向上和向下声明每个关键帧。在 JavaScript 中，我们可以通过在 [greensock API(GSAP)](https://greensock.com/) 中声明 `bounce` 来在 ease 中表达所有这些移动 (其他 JS 库有其他类型的 easing 默认值)。 +以弹跳为例。在 CSS 中，我们必须声明向上和向下的每个关键帧。在 JavaScript 中，我们可以通过在 [greensock API(GSAP)](https://greensock.com/) 中声明 `bounce` 来描述 ease 中所有这些移动 (其他 JS 库有其他类型的 easing 默认值)。 -这里使用的是 CSS 中的 bounce (例如 animate.css)： +这里是 CSS 中用来实现 bounce 的代码 (来自 animate.css 的例子)： ```css @keyframes bounceInDown { @@ -245,15 +245,15 @@ Easing 也可以传达动画素材的质量。以下面的 Pen 为例，你认 } ``` -下面是 JS 中使用 GreenSock 的相同弹跳： +下面是 JS 中使用 GreenSock 实现相同的 bounce： ```js gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 }) ``` -我们将在以下部分的一些示例中使用 GreenSock。他们有一个很棒的 [ease visualizer](https://greensock.com/ease-visualizer)，将帮助你建立精心制作的画架。 +我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [ease visualizer](https://greensock.com/ease-visualizer)，帮助你建立精心制作的画架。 ## 进一步阅读 -- [动画设计接口：通过 Val Head 动画改善用户体验](https://www.amazon.com/dp/B01J4NKSZA/) -- [Rachel Nabors 动画作品](https://abookapart.com/products/animation-at-work) +- [界面动画设计：通过 Val Head 动画改善用户体验](https://www.amazon.com/dp/B01J4NKSZA/) +- [Animation at Work 作者：Rachel Nabors](https://abookapart.com/products/animation-at-work)