「译」高效的 “box-shadow” 动画

原文地址：http://tobiasahlin.com/blog/how-to-animate-box-shadow/

如何才能防止在给 box-shadow 制做动画过渡时致使的每一帧都要进行的重绘（re-paint），从而提升页面的性能？
答案就是：不可能。给变化的 box-shadow 制做动画会大大缩减页面渲染的性能。

可是，这里依然有相似的方法实现相同的效果。尽可能的减小重绘的次数，能够保证你的动画可以保证在 60 FPS 左右：经过改变子元素的 opacity 透明度。

Demo

查看这个Demo，比较一下两种实现方式的不一样。左边的动画是在 box-shadow 的 :hover 状态时执行 box-shadow 动画， 而右边的实现方式中，咱们经过 :after 添加了一个伪元素，并给它添加了 box-shadow， 而后经过执行 opacity 动画来是实现相同的效果。

若是你打开你的调试工具，能够看到下面相似的结果（绿色部分表示绘制；越少越好）：

很明显若是咱们直接执行 box-shadow 的动画会致使更多的重绘。

为何会有这样的结果？ 只有不多的属性 才能避免在动画的过程不断的重绘，像 opacity 和 transform。
这就是两种方式的不一样之处，下面是核心代码：

/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out:
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.make-it-fast {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast:after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out:
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover:after {
  opacity: 1;
}

在上面的例子中，高效的实现方式有两层：一层负责呈现盒子，一层负责盒子阴影的过分动画，只对阴影的 opcity 执行动画。