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来实现，但是都或多或少的有副作用。

另外总结一下：

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