高性能动画“box-shadow”属性

布满荆棘的人生 2022-05-26 08:40 157阅读 0赞

本文从《[How to animate “box-shadow” with silky smooth performance][How to animate _box-shadow_ with silky smooth performance]》编译而来，英文没问题的同学，看原文找原味。  
案例效果如下图所示，具体效果请移步[demo][]。  
!\[案例演示\]([https://img-blog.csdn.net/20151123083204051][https_img-blog.csdn.net_20151123083204051]

为提高动画性能，应该减少页面的repaint次数。因此相对于直接动画“box-shadow”属性来说，使用伪对象的方式预先定义好阴影，然后动画opacity实现的方式性能更好。

/* 慢速方式 */
    .make-it-slow { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease-in-out: }
    
    /* hover响应 */
    .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: }
    
    /* hover之后显示出来 */
    .make-it-fast:hover:after { opacity: 1; }

完整案例效果如下所示。

.box { position: relative; display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
    
    .box:after { content: ""; border-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) }
    
    .box:hover { -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25) }
    
    .box:hover:after { opacity: 1 }

That’s all.

**声明**  
本文首发于极客头条。爱前端，乐分享。FedFun希望与您共同进步。  
欢迎任何形式的转载，烦请注明装载，保留本段文字。  
独立博客[http://whqet.github.io][http_whqet.github.io]  
新浪微博[http://weibo.com/FedFun][http_weibo.com_FedFun]  
极客头条

[How to animate _box-shadow_ with silky smooth performance]: http://tobiasahlin.com/blog/how-to-animate-box-shadow/
[demo]: http://tobiasahlin.com/demo/animate-box-shadow/
[https_img-blog.csdn.net_20151123083204051]: https://img-blog.csdn.net/20151123083204051
[http_whqet.github.io]: http://whqet.github.io
[http_weibo.com_FedFun]: http://weibo.com/FedFun