您的位置：首页 > Web前端 > CSS

css3中transition和display的坑

2015-09-23 18:09 701 查看

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

用opacity实现淡入淡出的效果。噢！good！一切正常

给个栗子：

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

代码laycode - v1.1
或者用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
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

代码laycode - v1.1
打开浏览器看一下效果先。我擦。。。。淡入淡出的效果全没了

怎么回事。。。这简直是破坏性的作用，这也是之前做动画过程中遇到的大坑

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

代码laycode - v1.1
浏览一下，会发现，这时候是会有延时隐藏的效果的。很好，又发现新东西了

那渐变的效果怎么办。。。。

聪明的码农们又想起了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
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

代码laycode - v1.1
浏览下先。。。。！！！！一切正常了

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

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

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

当然啦这就需要用到JS了

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航