• home > design > UI >

    当transition遇上display

    Author:zhoulujun@live.cn Date:

    第三种方法与第二种方法类似,用requestAnimationFrame来取代setTimeout,相应的修改了if条件里的js。 requestAnimationFrame其实也就跟setTimeout setInterval差不多,通过递归调用同一方法来不断更新画面以达

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

    <div id="box" class="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时碰到的坑。

    本文作者:jianglj 转载请注明来自:携程设计委员会


    转载本站文章《当transition遇上display》,
    请注明出处:https://www.zhoulujun.cn/html/design/ui/2016_0202_500.html