过渡&动画概述

Vue提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括：

• 在CSS和JS中，使用内置的transition元素组件来钩住组件中进入和离开DOM
• 过渡模式，以便在过渡期间编排顺序
• 在处理多个元素位置更新时，使用transition-group元素组件，通过FLIP技术来提高性能
• 使用watchers来处理应用中不同状态的过渡

除了提供有用的API之外，值得一提的是，前面的class和style声明也可以应用于动画和过渡，用于更简单的用例。我们将回顾一些web动画和过渡的基础知识。

1.基于class的动画和过渡

尽管transition元素组件对于组件的进入和离开非常有用，但也可以通过添加一个条件class来激活动画，而无需挂载组件。

• .shake {transform:translate3d(0,0,0); perspective: 1000px}
• @keyframes shake {10%,90%{transform: translate3d(-1px,0,0)}}
• <div :class="{ shake: noActivated }"></div>
• <button @click="noActivated = true"></button>
• data() { return { noActivated: false } }

2.过渡与Style绑定

一些过渡效果可以通过插值的方式来实现，例如在发生交互时将样式绑定到元素上。

• .movearea { transition: 0.2s background-color ease; }
• <div @mousemove="xCoordinate" :style="{ backgroundColor: 'hsl(${x}, 80%, 50%)'}" class="movearea"></div>
• methods: { xCoordinate(e) {this.x = e.clientX} }

通过使用插值来创建动画，将触发条件添加到鼠标的移动过程上，同时将CSS过渡属性应用在元素上，让元素知道在更新时要使用什么过渡效果。

3.性能

上面示例中显示的动画使用了transforms之类的东西，并应用了诸如perspective之类的奇怪的property——为什么它们是这样实现的，而不是仅仅使用margin和top等？ 我们可以通过对性能的了解，在web上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的property。下面介绍如何实现这个目标。

3.1Transform和Opacity

我们可以通过工具，例如csstriggers.com/ 来查看哪些属性会在动画时触发重绘，在工具中，查看transform的相关内容，可以看到：非常好的是，更改transform不会触发任何几何形状变化或绘制，这意味着该操作可能是由合成器线程在GPU的帮助下执行的。

Snipaste_2021-10-31_16-07-15.png

Opacity属性的行为也类似，因此他们是在web上做元素移动的理想选择。

3.2硬件加速

诸如perspective、backface-visibility和transform:translateZ(x)等property将让浏览器知道你需要硬件加速。如果要对一个元素进行硬件加速，可以应用以下任何一个property（并不是需要全部，任意一个就可以）：

perspective: 1000px;
backface-visibility: hidden;
transform: translateZ(0);
复制代码

许多像GreenSock这样的JS库都会默认你需要硬件加速，并在默认情况下应用，所以不需要手动设置它们。

4.Timing

对于简单UI过渡，即从一个状态到另一个没有中间状态的状态，通常使用0.1s到0.4s之间的计时，大多数人发现0.25s是一个最佳选择。能用这个定时做任何事情吗？并不是。如果有一些元素需要移动更大的距离，或者有更多的步骤或状态变化，0.25s并不会有很好的效果，你将不得不有更多的目的性，而且定时也需要更加独特。但这并不意味着不能在应用中重复使用效果好的默认值。 你可能发现，起始动画比结束动画的时间稍长一些，看起来会更好一些。用户通常是在动画开始时被引导的，而在动画结束时没有那么多耐心，因为他们想继续他们的动作。

5.Easing

Easing是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用ease-in，在结束动画节点使用ease-out。实际上需要的是反过来的。如果我们将这些状态应用于过渡，它应该像这样：

.button {
  background: #1b8f5a;
  /* 应用于初始状态，因此此转换将应用于返回状态 */
  transition: background 0.25s ease-in;
}

.button:hover {
  background: #3eaf7c;
  /* 应用于悬停状态，因此在触发悬停时将应用此过渡 */
  transition: background 0.35s ease-out;
}
复制代码

• Easing也可以表达动画元素的质量。另外通过调整Easing来获得很多独特的效果，可以使你的动画非常时尚，CSS允许通过调整cubic bezier属性来修改Easing，Lea Verou开发的cubic-bezier.com/ 对探索这个问题非常有帮助。
• 虽然使用cubic-bezier ease提供的两个控制柄可以为简单的动画获得很好的效果，但是JavaScript允许多个控制柄，以此支持更多的变化。
• 以弹跳为例，在CSS中我们必须声明向上和向下的每个关键帧。在JavaScript中，我们可以通过在greensock.com/ 中声明bounce来描述ease中所有这些移动（其他JS库有其他类型的easing默认值）
• CSS中用来实现bounce的代码（来自animate.css的例子），有35行代码；在JS中使用GreenSock实现相同的bounce，只需要1行代码：gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 })
• 之后的章节部分示例会使用GreenSock，他们有一个很棒的greensock.com/ease-visual… ，可以帮助建立精心制作的画架