如何实现平滑的“box-shadow”动画效果

如何实现平滑的“box-shadow”动画效果

这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制，应该创建一个伪元素并对其 opacity 元素进行动画处理，使其以每秒60帧的动画模仿运动物体相同的效果。

实例

认真观察 这个实例 ，比较我们在其中使用的不同技巧。你是不是会说两者效果看起来一样。唯一不同的是我们如何应用阴影并对其进行动画处理。在左边实例中，我们鼠标 hover (悬浮)时，对 box-shadow 应用了动画效果。而在右边的实例中，我们用 ::after 添加了一个伪元素并对其设置了阴影，并对该元素的 opacity 元素进行了动画处理。

如果你使用开发工具尝试了其中之一，您应该会看到类似这样的东西 (绿色条表示已经绘制，其越少越好):

当你悬停在左边的卡片(在 box-shadow 上应用动画)与悬浮在右边的卡片(对其伪元素的 opacity 应用动画)进行相比时，你会很明显的发现有更多的重新绘制。

为什么我们会看到这种效果？有 很少的 CSS 属性 ，即 opacity 和 transform ，进行动画处理时，不会不断触发重绘每一帧。我们最好坚持只在动画中更改这两个属性实现最小化重绘 (您的浏览器不得不做的工作)。

抛却其它的布局样式，这就是这两种技术之间的 关键区别 ︰

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


.make-it-slow:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


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


.make-it-fast::after {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out:
}


.make-it-fast:hover::after {
opacity: 1;
}

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息