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

pkwenda 发布于2019-08-28 18:26 / 2274人阅读

摘要：给变化的制作动画会大大缩减页面渲染的性能。尽量的减少重绘的次数，可以保证你的动画能够保证在左右通过改变子元素的透明度。为什么会有这样的结果只有很少的属性才能避免在动画的过程不断的重绘，像和。

原文地址：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 执行动画。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111230.html

[译]深入了解CSS Box Shadow

摘要：水平偏移水平偏移控制了盒子阴影在轴的偏移。同时，因为是负值，所以向上移动。如果是负值，则会在各个方向上收缩。值得注意的是，因为它的扩展距离是正，所以会在各个方向上增加因为没有水平和垂直偏移。它可以通过任何可以表示颜色的方式来表示颜色。原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们...

骞讳护 2019-08-28 18:20 评论0 收藏0
[译]深入了解CSS Box Shadow

摘要：水平偏移水平偏移控制了盒子阴影在轴的偏移。同时，因为是负值，所以向上移动。如果是负值，则会在各个方向上收缩。值得注意的是，因为它的扩展距离是正，所以会在各个方向上增加因为没有水平和垂直偏移。它可以通过任何可以表示颜色的方式来表示颜色。原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们...

SQC 2019-08-01 14:53 评论0 收藏0
完整的学习和使用CSS动画【译】

摘要：然而通过自定义贝塞尔曲线的值，可以满足你具体的动画时间需求。关于如何使用贝塞尔曲线的方法我们可以通过查看的开发者网站动画延时动画延时常常应用于当我们需要对动画进行的延时操作的时候。从而减少大部分动画执行期间潜在的性能损耗问题。注：原文有较大改动使用 keyframes, animation属性，例如timing, delay, play state, animation-coun...

fjcgreat 2019-08-30 15:53 评论0 收藏0
完整的学习和使用CSS动画【译】

摘要：然而通过自定义贝塞尔曲线的值，可以满足你具体的动画时间需求。关于如何使用贝塞尔曲线的方法我们可以通过查看的开发者网站动画延时动画延时常常应用于当我们需要对动画进行的延时操作的时候。从而减少大部分动画执行期间潜在的性能损耗问题。注：原文有较大改动使用 keyframes, animation属性，例如timing, delay, play state, animation-coun...

sean 2019-08-01 16:27 评论0 收藏0