css3动画与display：none冲突的解决⽅案
概述
css不能在display:none和display:block之间进⾏动画，并且也不能在height:0和height:auto之间进⾏动画。这⾥我研究了⼀下在display:none 和display:block之间进⾏动画的解决⽅案，记录下来供以后开发时参考，相信对其他⼈也有⽤。
参考资料：
机制
我的理解是这样的：由于display:none会引起页⾯的重绘事件，所以它是⼀个异步的延时事件，所以浏览器其实会先解析animate的代码，然后再执⾏display:none。
js控制css3动画触发这样就引发了⼀个问题：如果我们要设置类似淡⼊淡出的效果怎么办？就是让元素在消失/出现的同时产⽣动画怎么办？这⾥我研究了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) {
$veClass(divClass2);
setTimeout(function(){
$veClass(divClass1);
}, 1000); //1s是动画时间。
}
其它
我还试过⽤transitionend事件，questanimationframe来实现，但是都或多或少的有副作⽤。另外总结⼀下：
1. 如果消失前后都需要占据空间，则⽤visiblity。
2. 如果消失前后都不需要占据空间，则⽤绝对定位和visiblity。
3. 如果消失前需要占据空间但是消失后不需要占据空间，则⽤timeout和visiblity。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。