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

发表于   |   分类于   |  

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

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

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

Demo

box-shadow 动画对比

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

如果你打开你的调试工具，可以看到下面类似的结果（绿色部分表示绘制；越少越好）：
timeline 对比

很明显如果我们直接执行 box-shadow 的动画会导致更多的重绘。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 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 执行动画。