当transition遇上display_html/css

来源：动视网责编：小采时间：2020-11-27 16:36:14

当transition遇上display_html/css

当transition遇上display_html/css_WEB-ITnose:相信大家在试用css3动画时候一定用过transition属性，相对于js动画来说用起来更快速简单。代码如下：HTML结构：动画按钮 CSS代码： .box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto;

推荐度：

点击下载本文 文档为doc格式

导读当transition遇上display_html/css_WEB-ITnose:相信大家在试用css3动画时候一定用过transition属性，相对于js动画来说用起来更快速简单。代码如下：HTML结构：动画按钮 CSS代码： .box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto;

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

CSS代码：

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; /*display: block;*/}.hidden { /*display: none;*/ opacity: 0;}

JS代码

var box = $('#box');$('button').on('click', function () { if(box.hasClass('hidden')){ box.removeClass('hidden'); }else{ box.addClass('hidden'); }});

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

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

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

CSS代码：

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; visibility: visible;}.hidden { display: none;}.visuallyhidden { opacity: 0;}

js代码

var box = $('#box');$('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); setTimeout(function () { box.removeClass('visuallyhidden'); }, 20); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); }});

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

js代码如下

var box = $('#box');$('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); requestAnimationFrame(function(){ box.removeClass('visuallyhidden'); }); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); }});

当transition遇上display_html/css

推荐度：

点击下载本文 文档为doc格式

标签： tr css transition

热门焦点

当transition遇上display_html/css

当transition遇上display_html/css

当transition遇上display_html/css

最新推荐

猜你喜欢

热门推荐