您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

前端当transition遇上display

相信大家在试用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时碰到的坑。


[教程作者:jianglj]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd3158.html
科讯CMS系统 V9标签清单
浅聊四个主流的页面间跳转动效
图趣网微信
建议反馈
×