CSS3动画与display:none冲突的解决办法

最新推荐文章于 2026-08-02 11:49:24 发布

转载最新推荐文章于 2026-08-02 11:49:24 发布 · 2.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/yangzhou33/p/9119596.html

收录于

前端

在前端开发中，CSS3无法直接在display:none和display:block之间做动画。本文介绍了两种解决方法：1) 利用绝对定位和visibility属性，2) 使用setTimeout配合visibility属性。通过这些技巧，可以在元素淡入淡出时避免尺寸变化的问题，实现平滑的过渡效果。

最近在做项目，前端用VUE做数据大屏，想用CSS3动画实现淡入淡出效果，
但是发现盒子会伸缩，最后翻阅大神操作，得以解决，记录一下，原文链接：https://www.cnblogs.com/yangzhou33/p/9119596.html

概述
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。

标签

#vue