From 3c0aa6c39d5eda1dbd2a4a358ea5135f801feb8b Mon Sep 17 00:00:00 2001 From: wxsm Date: Tue, 30 Nov 2021 11:05:51 +0800 Subject: [PATCH 1/7] update transitions-overview.md --- src/guide/transitions-overview.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 5628b37e9..ec766d97b 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -2,14 +2,14 @@ Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括： -- 在 CSS 和 JS 中，使用内置的 `` 组件来钩住组件进入和离开 DOM。 +- 组件进入和离开 DOM 的钩子，在 CSS 和 JS 中均可用，使用内置的 `` 组件。 - 过渡模式，以便你在过渡期间编排顺序。 -- 在处理多个元素位置更新时，使用 `` 组件，通过 FLIP 技术来提高性能。 +- 处理多个元素就地更新的钩子，使用 `` 组件，通过 FLIP 技术来提高性能。 - 使用 `watchers` 来处理应用中不同状态的过渡。 我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了提供这些有用的 API 之外，值得一提的是，我们前面介绍的 class 和 style 声明也可以应用于动画和过渡，用于更简单的用例。 -在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。对于希望在开始学习之前进一步了解网络动画基础知识的其他人，请继续阅读。 +在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。对于希望在开始学习之前进一步了解 web 动画基础知识的其他人，请继续阅读。 ## 基于 class 的动画和过渡 @@ -120,7 +120,7 @@ Vue.createApp(Demo).mount('#demo') 你可能注意到上面显示的动画使用了 `transforms` 之类的东西，并应用了诸如 `perspective` 之类的奇怪的 property——为什么它们是这样实现的，而不是仅仅使用 `margin` 和 `top` 等？ -我们可以通过对性能的了解，在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。 +通过对性能的关注，我们可以在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。 ### Transform 和 Opacity @@ -146,7 +146,7 @@ transform: translateZ(0); ## Timing -对于简单 UI 过渡，即从一个状态到另一个没有中间状态的状态，通常使用 0.1s 到 0.4s 之间的计时，大多数人发现 *0.25s* 是一个最佳选择。你能用这个定时做任何事情吗？并不是。如果你有一些元素需要移动更大的距离，或者有更多的步骤或状态变化，0.25s 并不会有很好的效果，你将不得不有更多的目的性，而且定时也需要更加独特。但这并不意味着你不能在应用中重复使用效果好的默认值。 +对于简单 UI 过渡，即从一个状态到另一个没有中间状态的状态，通常使用 0.1s 到 0.4s 之间的计时，大多数人发现 *0.25s* 是一个最佳选择。你能用这个定时做任何事情吗？并不能。如果你有一些元素需要移动更大的距离，或者有更多的步骤或状态变化，0.25s 的效果可能会不好，你将不得不更加用心，而且定时也需要更加独特。但这并不意味着你不能在应用中重复使用效果好的默认值。 你也可能会发现，起始动画比结束动画的时间稍长一些，看起来会更好一些。用户通常是在动画开始时被引导的，而在动画结束时没有那么多耐心，因为他们想继续他们的动作。 @@ -176,13 +176,13 @@ Easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认 -你可以通过调整你的 Easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier 属性来修改 Easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 +你可以通过调整你的 Easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier property 来修改 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) +![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 的例子)： @@ -230,7 +230,7 @@ Easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认 gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 }) ``` -我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [ease visualizer](https://greensock.com/ease-visualizer)，帮助你建立精心制作的画架。 +我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [ease 可视化工具](https://greensock.com/ease-visualizer)，帮助你建立精心制作的 ease。 ## 进一步阅读 From 6f92fbae3430a384f9bfb377e1e87f14fda9df7d Mon Sep 17 00:00:00 2001 From: wxsm Date: Tue, 30 Nov 2021 11:17:07 +0800 Subject: [PATCH 2/7] update transitions-overview.md --- src/guide/transitions-overview.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index ec766d97b..6eb4c9590 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -120,7 +120,7 @@ Vue.createApp(Demo).mount('#demo') 你可能注意到上面显示的动画使用了 `transforms` 之类的东西，并应用了诸如 `perspective` 之类的奇怪的 property——为什么它们是这样实现的，而不是仅仅使用 `margin` 和 `top` 等？ -通过对性能的关注，我们可以在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。 +通过关注性能表现，我们可以在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。 ### Transform 和 Opacity @@ -152,7 +152,7 @@ transform: translateZ(0); ## Easing -Easing 是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 `ease-in`，在结束动画节点使用 `ease-out`。实际上你需要的是反过来的。 +easing 是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 `ease-in`，在结束动画节点使用 `ease-out`。实际上你需要的是反过来的。 如果我们将这些状态应用于过渡，它应该像这样： @@ -172,15 +172,15 @@ Easing 是在动画中表达深度的一个重要方式。动画新手最常犯 -Easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认为哪个球是硬的，哪个球是软的？ +easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认为哪个球是硬的，哪个球是软的？ -你可以通过调整你的 Easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier property 来修改 Easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 +你可以通过调整你的 easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier property 来修改 easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 虽然使用 cubic-bezier ease 提供的两个控制句柄可以为简单的动画实现很好的效果，但是 JavaScript 允许多个控制句柄，以支持更多的变化。 -![Ease 对比](/images/css-vs-js-ease.svg) +![ease 对比](/images/css-vs-js-ease.svg) 以弹跳为例。在 CSS 中，我们必须声明向上和向下的每个关键帧。在 JavaScript 中，我们可以通过在 [GreenSock API (GSAP)](https://greensock.com/) 中声明 `bounce` 来描述 ease 中所有这些移动 (其他 JS 库有其他类型的 easing 默认值)。 From a93cfdb9534c5007f18d24a1e97673dcaac80a4f Mon Sep 17 00:00:00 2001 From: wxsm Date: Wed, 1 Dec 2021 09:29:52 +0800 Subject: [PATCH 3/7] update --- src/guide/transitions-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 6eb4c9590..992d6b5a6 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -176,7 +176,7 @@ easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认 -你可以通过调整你的 easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier property 来修改 easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 +你可以通过调整你的 easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic-bezier property 来修改 easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 虽然使用 cubic-bezier ease 提供的两个控制句柄可以为简单的动画实现很好的效果，但是 JavaScript 允许多个控制句柄，以支持更多的变化。 From 0bacaee9d2ad2392f3b72e31413cef0719ef5a76 Mon Sep 17 00:00:00 2001 From: wxsm Date: Sun, 5 Dec 2021 09:37:43 +0800 Subject: [PATCH 4/7] Apply suggestions from code review Co-authored-by: GU Yiling --- src/guide/transitions-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 992d6b5a6..7f8bb8e76 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -9,7 +9,7 @@ Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是 我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了提供这些有用的 API 之外，值得一提的是，我们前面介绍的 class 和 style 声明也可以应用于动画和过渡，用于更简单的用例。 -在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。对于希望在开始学习之前进一步了解 web 动画基础知识的其他人，请继续阅读。 +在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。如果希望在开始学习之前进一步了解 web 动画基础知识，请继续阅读。 ## 基于 class 的动画和过渡 @@ -172,7 +172,7 @@ easing 是在动画中表达深度的一个重要方式。动画新手最常犯 -easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认为哪个球是硬的，哪个球是软的？ +缓动效果也可以用来表达动画元素的材质。以下面的 pen 为例，你认为哪个球是硬的，哪个球是软的？ From d3e9f24f28086258125d0cb9eb0a81bd052fa608 Mon Sep 17 00:00:00 2001 From: wxsm Date: Sun, 5 Dec 2021 09:45:10 +0800 Subject: [PATCH 5/7] update --- src/guide/transitions-overview.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 7f8bb8e76..3ad08a914 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -144,15 +144,15 @@ transform: translateZ(0); 许多像 GreenSock 这样的 JS 库都会默认你需要硬件加速，并在默认情况下应用，所以你不需要手动设置它们。 -## Timing +## 时长 对于简单 UI 过渡，即从一个状态到另一个没有中间状态的状态，通常使用 0.1s 到 0.4s 之间的计时，大多数人发现 *0.25s* 是一个最佳选择。你能用这个定时做任何事情吗？并不能。如果你有一些元素需要移动更大的距离，或者有更多的步骤或状态变化，0.25s 的效果可能会不好，你将不得不更加用心，而且定时也需要更加独特。但这并不意味着你不能在应用中重复使用效果好的默认值。 你也可能会发现，起始动画比结束动画的时间稍长一些，看起来会更好一些。用户通常是在动画开始时被引导的，而在动画结束时没有那么多耐心，因为他们想继续他们的动作。 -## Easing +## 缓动效果 -easing 是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 `ease-in`，在结束动画节点使用 `ease-out`。实际上你需要的是反过来的。 +缓动效果是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 `ease-in`，在结束动画节点使用 `ease-out`。实际上你需要的是反过来的。 如果我们将这些状态应用于过渡，它应该像这样： @@ -176,13 +176,13 @@ easing 是在动画中表达深度的一个重要方式。动画新手最常犯 -你可以通过调整你的 easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic-bezier property 来修改 easing，Lea Verou 开发的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 +你可以通过调整你的缓动函数来获得很多独特的效果，使动画非常炫酷。CSS 允许你通过调整 cubic-bezier property 来进行修改，Lea Verou 的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 -虽然使用 cubic-bezier ease 提供的两个控制句柄可以为简单的动画实现很好的效果，但是 JavaScript 允许多个控制句柄，以支持更多的变化。 +虽然使用 cubic-bezier 缓动函数提供的两个控制点可以为简单的动画实现很好的效果，但 JavaScript 允许使用多个控制点，因此也支持更多的变化。 -![ease 对比](/images/css-vs-js-ease.svg) +![缓动效果对比](/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` 来描述缓动效果中的所有这些移动 (其他 JS 库有其他类型的缓动效果默认值)。 这里是 CSS 中用来实现 bounce 的代码 (来自 animate.css 的例子)： @@ -230,7 +230,7 @@ easing 是在动画中表达深度的一个重要方式。动画新手最常犯 gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 }) ``` -我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [ease 可视化工具](https://greensock.com/ease-visualizer)，帮助你建立精心制作的 ease。 +我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [缓动效果可视化工具](https://greensock.com/ease-visualizer)，帮助你建立精心制作的缓动效果。 ## 进一步阅读 From 880f79e4ec78c35a85171c86906baac7f610af9b Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 9 Dec 2021 10:54:32 +0800 Subject: [PATCH 6/7] update --- src/guide/transitions-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 3ad08a914..9c9476bb5 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -176,9 +176,9 @@ transform: translateZ(0); -你可以通过调整你的缓动函数来获得很多独特的效果，使动画非常炫酷。CSS 允许你通过调整 cubic-bezier property 来进行修改，Lea Verou 的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 +你可以通过调整你的缓动函数来获得很多独特的效果，使动画非常炫酷。CSS 允许你通过调整 cubic-bezier 函数的参数来修改缓动效果，Lea Verou 的[这个 playground](https://cubic-bezier.com/#.17,.67,.83,.67) 对探索这个问题非常有帮助。 -虽然使用 cubic-bezier 缓动函数提供的两个控制点可以为简单的动画实现很好的效果，但 JavaScript 允许使用多个控制点，因此也支持更多的变化。 +虽然可以通过三次贝塞尔曲线提供的两个控制点为简单动画实现很好的效果，但 JavaScript 允许使用多个控制点，因此也支持更多的变化。 ![缓动效果对比](/images/css-vs-js-ease.svg) From b1b287441b1374dbb68520d9ff7a1b6a1efbcfaa Mon Sep 17 00:00:00 2001 From: GU Yiling Date: Thu, 9 Dec 2021 10:58:05 +0800 Subject: [PATCH 7/7] chore: update format --- src/guide/transitions-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index 9c9476bb5..787d09fc3 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -230,7 +230,7 @@ transform: translateZ(0); gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 }) ``` -我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 [缓动效果可视化工具](https://greensock.com/ease-visualizer)，帮助你建立精心制作的缓动效果。 +我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的[缓动效果可视化工具](https://greensock.com/ease-visualizer)，帮助你建立精心制作的缓动效果。 ## 进一步阅读