css3中transition和display的坑

最新推荐文章于 2021-07-12 10:59:32 发布

@拯救世界的狗子

最新推荐文章于 2021-07-12 10:59:32 发布

阅读量906

点赞数

分类专栏：前端爱踩的坑文章标签： css css3 html5 html 前端

本文链接：https://blog.csdn.net/weixin_44900668/article/details/106131692

版权

前端爱踩的坑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

不知道大家做css3动画的时候遇到过这种情景没？

用opacity实现淡入淡出的效果。一切正常，没什么问题

例：

<!DOCTYPE html> 
<html> 
<meta charset="uft-8">
<head> 
<style>
.div1{
     background: red;
}
.div2 {
     width:100px;
     height:100px;
     background:blue;
     transition:opacity 2s;
     -moz-transition:opacity 2s; /* Firefox 4 */
     -webkit-transition:opacity 2s; /* Safari and Chrome */
     -o-transition:opacity 2s; /* Opera */
     opacity: 0;
} 
.div1:hover .div2 {
     opacity:1;
} 
</style> 
</head> 
<body> 
     <div class="div1">
     <p>请移动到红色div上</p>
     <div class="div2"></div>
</div> 
</body> 
</html>

或者用animation，在keyframe中写也一样。这里就不写出代码了

但是难免我们会遇到这样的需求，也一定会遇到：我们都知道opacity:0的时候，其实他还是占页面空间的，他会遮挡到他下面的层（不是视觉上）。而且绑定在他上面的一些onclick事件之类的，也同样会发生。这时候我们想在opacity:0的时候，把他隐藏掉，用display: none。好，那我们稍微在css中加几句，变成

.div1{
     background: red;
}
.div2 {
     width:100px;
     height:100px;
     background:blue;
     transition:opacity 2s;
     -moz-transition:opacity 2s; /* Firefox 4 */
     -webkit-transition:opacity 2s; /* Safari and Chrome */
     -o-transition:opacity 2s; /* Opera */
     opacity: 0;
     display: none;
} 
.div1:hover .div2 {
     opacity:1;
     display:block
}

打开浏览器一看。淡入淡出的效果全没了，怎么回事。这简直是破坏性的作用，这也是之前做动画过程中遇到的大坑

因为使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。
div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。

原因

display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

解决方案

使用visibility替代display
visibility:hidden的时候元素仍然存在于文档流中，同时opacity对应的数值0，visibility:visible时opacity对应的数值1，transition属性可以对在opacity0～1之间进行过渡

visibility的效果其实跟 display 在一定程度上相似，因为它仍然是占空间的，如用opacity会让元素处于标准文档流，只是透明了但还占着位置，会遮挡到下面的层的，但visibility是不会遮挡到下面的层的，也就是说他跟opacity这样的存在不同，onclick等事件是不会发生的。

我们来说下visibility，常用到的是visible和 hidden 两个值。但也可以是数值，
等于0时相当于hidden，而只要大于0时，visibility就为visible。

.div1{
     background: red;
}
.div2 {
     width:100px;
     height:100px;
     background:blue;
     transition:all 2s;
     -moz-transition:all 2s; /* Firefox 4 */
     -webkit-transition:all 2s; /* Safari and Chrome */
     -o-transition:all 2s; /* Opera */
     visibility: hidden;
} 
.div1:hover .div2 {
     visibility: visible;
}

浏览一下，会发现，这时候是会有延时隐藏的效果的。很好，又发现新东西了

那渐变的效果怎么办。

聪明的码农们又想起了opacity ，结合起来。

.div1{
     background: red;
}
.div2 {
     width:100px;
     height:100px;
     background:blue;
     transition:all 2s;
     -moz-transition:all 2s; /* Firefox 4 */
     -webkit-transition:all 2s; /* Safari and Chrome */
     -o-transition:all 2s; /* Opera */
     visibility: hidden;
     opacity: 0;
} 
.div1:hover .div2 {
     visibility: visible;
     opacity: 1;
}

其实，visibility会在opacity生效后再应用。比如隐藏时，先opacity变为0，再应用了visibility:hidden 这时候就隐藏起来了，相关的事件也不会发生。看来display:none这时候被抛弃了啊

但visibility:hidden始终是占着页面空间的，display能够减少页面的repaint( 重绘 )，先把display变成block 然后延迟transition动画的执行，这就需要用到JS了

@拯救世界的狗子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
css3中transition和display的坑

不知道大家做css3动画的时候遇到过这种情景没？用opacity实现淡入淡出的效果。一切正常，没什么问题例：<!DOCTYPE html> <html> <meta charset="uft-8"><head> <style>.div1{ background: red;}.div2 { width:100px; height:100px; background:blue; tr
复制链接

扫一扫

专栏目录