css3 动画与display:none冲突的解决方案

概述

css不能在display:none和display:block之间进行动画，并且也不能在height:0和height:auto之间进行动画。这里我研究了一下在display:none和display:block之间进行动画的解决方案，记录下来供以后开发时参考，相信对其他人也有用。

参考资料：

CSS3 Animation and Display None

解决transition动画与display冲突的几种方法

机制

我的理解是这样的：由于display:none会引起页面的重绘事件，所以它是一个异步的延时事件，所以浏览器其实会先解析animate的代码，然后再执行display:none。

这样就引发了一个问题：如果我们要设置类似淡入淡出的效果怎么办？就是让元素在消失/出现的同时产生动画怎么办？这里我研究了2个解决方案。

利用绝对定位和visiblity

不利用display:none，而是利用它的替代方式：

opacity: 0;

visibility: hidden;

但是这样会占据空间。如果不想占据空间的话，只能使用绝对定位，把元素独立出去。这个时候会有一个层叠问题，所以需要搭配z-index控制层叠关系使它出现或者消失。

示例如下：

//自身css效果

.animate {

    position: absolute;

    top: 0;

    left: 0;

    transition: 1s;

    opacity: 0;

    visibility: hidden;

    z-index: 0;

}

//出现时的效果

.cur {

    opacity: 1;

    visibility: visible;

    z-index: 10;

}

利用timeout

jquery里面也有淡入淡出的方法，它是怎么实现的呢？通过查资料可以知道，它是通过deferred对象通过延时display: none来实现的。好处是能够适用于出现时占据空间，消失时又不占据空间的情况。实例如下：

//css

.div {

    display: none;

}

.div-animate1 {

    display: block;

    visibility: hidden;

    opacity: 0;

    transform: translate3d(100px, 0, 0);

    transition: 1s;

}

.div-animate2 {

    visibility: visible;

    opacity: 1;

    transform: translate3d(0, 0, 0);

}

//js

function divAnimate1($div, divClass1, divClass2) {

    $div.addClass(divClass1);

    setTimeout(function(){

        $div.addClass(divClass2);

    });

}

function divAnimate2($div, divClass1, divClass2) {

    $div.removeClass(divClass2);

    setTimeout(function(){

        $div.removeClass(divClass1);

    }, 1000); //1s是动画时间。

}

其它

我还试过用transitionend事件，window.requestanimationframe来实现，但是都或多或少的有副作用。

另外总结一下：

如果消失前后都需要占据空间，则用visiblity。
如果消失前后都不需要占据空间，则用绝对定位和visiblity。
如果消失前需要占据空间但是消失后不需要占据空间，则用timeout和visiblity。

巴特西

css3 动画与display:none冲突的解决方案

概述

机制

利用绝对定位和visiblity

利用timeout

其它

最新文章

热门文章