css3中transition和display的坑
发布在CSS随笔记录2015年1月27日view:6947HTML5CSSbijoux cartier homme faux
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

用opacity实现淡入淡出的效果。噢!good!一切正常enter image description here 给个栗子:

<!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
} 

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

聪明的码农们当然有办法来解决这种情况。 大家都知道visibility的效果其实跟 display 在一定程度上相似, 当然是一定程度上。 那为什么说只是一定程度上相似呢,因为它仍然是占空间的,那么这时候看官一定会说,这么用跟opacity压根没区别呀enter image description here

但聪明的码农们一定又想到,这时候,他是不会遮挡到下面的层的,也就是说 他跟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
} 

浏览下先。。。。!!!!一切正常了enter image description here

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

当然,有人会说visibility:hidden始终是占着页面空间的,display能够减少页面的repaint,还是要用display:none怎么做呢

聪明的码农又想到了: 先把display变成block 然后延迟transition动画的执行

当然啦 这就需要用到JS了

以上就是display和transition中发现的坑。。。。!

评论
发表评论
2年前
添加了一枚【评注】:这是啥
2年前
添加了一枚【评注】:语句不通顺
2年前
赞了此文章!
WRITTEN BY
Stuinfer_Galen
前端开发工程师 | 一个1心不能2用的糟糕青年
TA的新浪微博
PUBLISHED IN
CSS随笔记录

分享一些CSS随笔,欢迎拍板

我的收藏