很久以前，动画效果必须由 jquery 的 animate() 方法来处理，许多复杂的淡入淡出效果的处理是通过 display 的属性值切换实现的。太早显示，那么动画还没完成，但是太晚的话就会在页面上显示一片空白，总是需要回调函数去给执行完的动画擦屁股。

　　CSS 中的 pointer-events 属性(尽管已经存在很长时间，但是不经常使用)只是让元素失去了点击和交互的响应，就好像它们不存在一样。它能通过 CSS 控制显示或隐藏，不会打断动画也不会影响页面的渲染或可见性。

　　除了将 opacity 设置为零，它和将 display 设置为 none 具有相同的效果，但是不会触发新的渲染机制。需要隐藏元素的时候，我会将它的 opacity 设置为 0 并将 pointer-events 设置为 off，然后就任由其自生自灭啦。

　　这样做尤其适用于绝对定位的元素，因为你能够自信满满地说他们绝对不会影响到页面中的其他元素。

　　它有时也会剑走偏锋，因为动画的时机并不总那么完美 — 比如一个元素在不可见状态下仍然可以点击或者覆盖了其他内容，或者只有当元素淡入显示完全的时候才可以点击，但是不要灰心，会有办法解决的。(下文会提到解决办法，译者注)

　　3、不要一次给所有内容都设置动画，用动作编排加以替代

　　单一的动画会很流畅，但是和其他许多动画一起也许就完全乱套了。编写一个流畅的全员动画的例子很简单，但当数量级上升到整个网站时性能就很难维持了。因此，合理安排好每个元素非常重要。

　　你需要将所有的时间节点安排好，来避免所有的动画内容同时开始或进行。典型的例子，2 或 3 个动画同时进行可能不会出现卡慢的现象，尤其是在它们开始的时间略有不同的情况下。但是超过这个数量，动画就可能发生滞缓。

　　理解动作编排这个概念非常重要，除非你的页面真的只有一个元素。它貌似是舞蹈领域的东西，但是在动画界它同样的重要。每个内容都要在合适的方向和时机出现，即使它们相互分离，但是它们要给人一种按部就班的感觉。

　　谷歌的 material design 有几点关于动作编排的有趣建议，虽然这并不是实现目标的不二法门，但总有一些是你应该去考虑和尝试的。

　　更多内容： Google Material Design · Motion

　　4、适当增加切换延时能够更简单地编排动作

　　动画的编排非常重要，同时也会做大量的试验和测试才能恰如其分。然而，动画编排的代码并不会非常复杂。

　　我通常会改变一个父元素(通常是 body)的 class 值来触发一系列的改变，这些改变有着各不相同的切换延时以便能够适时展现。单从代码来看，你只需要关心状态的变化，而不用担心一堆时间节点的维持。

　　Gyroscope Chrome Extension 的动画

　　交错安排一系列的元素是动画编排的一种简单易行的方法，这种方法很有效，因为它在性能良好的同时还好看—但请记住你本想让几个动画同时发生的。你想把这些动画分布开来，让每个都表现地流畅，而不是一下子太多动画从而显得特别慢。适当部分的重叠会看起来连续流畅而不是链式的单独动画。

　　代码示例

　　有一些很简单的技巧来错开你的元素—尤其是其中有非常多的内容。如果页面中有小于 10 项内容，或者元素数量可预估(比如静态页面)，我通常会在 CSS 中指定特定的值。这是最简单易行的方法了。

　　一个简单的 SASS 循环

　　对更多的内容或者动态内容来说，可以在循环中动态地给每项内容添加时间节点。

　　一个简单的 JavaScript 循环

　　有两个典型的变量：基本延时和各个项目的延时。它很难协调，但你一旦找到正确的值，效果将会非常完美。

　　5、在慢动作中使用增量设计，过后再加快动画的速度

　　动画设计中，时间节点就是一切。20% 的工作是用来实现效果，剩下的 80% 使用来寻找合适的参数和持续时间来让一切在同时发生时显得流畅。

　　尤其是在编排多个动画的时候，为了达到高性能和高共同性，观察动画的慢动作会让一切工作变得非常容易。

　　无论你用的是 JavaScript 还是 CSS 预处理器比如 SASS(我们非常喜欢它)，都需要简单地做一些额外的计算并且需要声明一些有用的变量。