当transition遇上display

相信大家在试用css3动画时候一定用过transition属性,相对于js动画来说用起来更快速简单。
代码如下:
HTML结构:

CSS代码:

JS代码

在点击按钮后可以看到淡入淡出的动画效果,但是在css代码中解除对于display属性的两段注释以后,再打开浏览器一看,淡入淡出的效果全没了。
这简直是破坏性的作用,然后我度娘了一下总结了几个方法。

第一种方法:将display用visibility来替代,大家都知道visibility的效果其实跟display在一定程度上相似,那为什么说只是一定程度上相似呢,因为它仍然是占空间的,那你一定会说,这么用跟opacity没啥区别呀。但却可以避免遮挡下面的层比如按钮的点击事件。

第二种方法是相对于第一种方法的进阶,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

js代码

第三种方法与第二种方法类似,用requestAnimationFrame来取代setTimeout,相应的修改了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

js代码如下

以上就是当transition遇上display时碰到的坑。

1 5 收藏 5 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 柠檬℃ web前端工程师 2016/01/14

    我想问一下,你的第一个去掉display和现实display是不是写的有问题啊?(http://codepen.io/anon/pen/gPxzRK)这是我照着你的写的,结果是去掉或者加上display对box没什么影响

    • DOLLOR   2016/01/14

      你的代码中,ID选择器(#box)的优先级比类选择器(.hidden)的优先级高,所以,你给元素添加hidden类后,.hidden中的display被#box中的display覆盖了。你应该如实按照本文,用.box取代#box。

      详细请自行baidu“CSS权重”知识。

    • 看个人喜好,opacity只是透明,还会占据空间,效果类似visibility,display不会占据空间,如果想透明后还不占据空间,就加上display

跳到底部
返回顶部