关于will-change的remove问题

关于will-change的remove问题

老师您好,这里will-change的remove方法有哪些?视频中说的放到父级元素的hover中时如何操作的……

谢谢老师!

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,抱歉老师再一开始回答的时候考虑的不周全, 给同学造成了困扰, 这里给你举个简单的例子。参考下面的理解

1、 HTML结构如下

http://img1.sycdn.imooc.com//climg/5cf3d20a000186b411580366.jpg

2、CSS中设置样式, 在子元素中提前声明will-change, 因为transition需要触发事件才能有效果,比如鼠标移入一个元素,才可以触发transition, 如视频中所讲:当网页加载完的时候 是没有调用这个transition的, transition是css改变的时候才调用,所以这里will-change是提前申明了

http://img1.sycdn.imooc.com//climg/5cf3d1930001406113081212.jpg

3、鼠标移入父元素,触发子元素的动画, 在鼠标离开父元素后, 子元素的will-change会自动remove

http://img1.sycdn.imooc.com//climg/5cf3d23f000126bd08400208.jpg

这一块确实比较抽象不好理解,同学可以结合示例理解一下,另, 同学也可以再回顾一下视频,加深理解

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~



  • Rockets总冠军 提问者 #1
    谢谢老师,我懂了,麻烦老师了。感谢!
    2019-06-02 22:09:03
好帮手慕慕子 2019-06-02 17:51:03

同学你好,will-change的remove方法可以简单的分为两类, 一种是通过CSS操作, 另一种是通过js操作

1、 在CSS中使用, 提前声明will-change,让父元素hover的时候触发动画,这样移出的时候就会自动remove,我们不用去这个自动remove的过程哦

2、在JS中remove的方式,这种方式,同学目前阶段了解一下,知道有这种方式就可以了, 不需要掌握的

http://img1.sycdn.imooc.com//climg/5cf39b5f0001a17907000478.jpg

以上示例在样式表中直接添加了will-change属性,会导致浏览器将对应的优化工作一直保存在内存中,这其实是不必要的。下面展示如何使用脚本正确地应用will-change属性

http://img1.sycdn.imooc.com//climg/5cf39b8c0001057709730599.jpg


如果帮助到了你, 欢迎采纳!

祝学习愉快~~~



  • 提问者 Rockets总冠军 #1
    老师您好,不好意思,没有太懂第一点的“ 提前声明will-change,让父元素hover的时候触发动画,这样移出的时候就会自动remove”这一句的具体操作方法,能不能麻烦老师举一个简单的小例子。就是will-change和hover的位置这些。麻烦老师了
    2019-06-02 21:08:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师