微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

当transition遇上display

2016-01-23 19:57 前端大全

(点击上方,可快速关注)

来源:携程设计委员会

网址:http://ued.ctrip.com/blog/when-on-transition-display.html


相信大家在试用css3动画时候一定用过transition属性,相对于js动画来说用起来更快速简单。


代码如下:


HTML结构:


<div id="box"></div>

<button>动画按钮</button>


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时碰到的坑。



【今日微信公号推荐↓】

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 RxJava源码分析(一):Observable的几种创建方式 2015 – 2016 最新 Sublime Text 主题 适合儿童使用的Linux操作系统DouDouLinux 设计模式开篇之设计原则 P-Si与N-Si的美丽邂逅–PN结