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

329 查看

原文地址: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 的动画会导致更多的重绘。

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

/* 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 执行动画。