不知道大家做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
或者用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
打開瀏覽器看一下效果先。 我擦。。。。淡入淡出的效果全沒了
怎么回事。。。這簡直是破壞性的作用，這也是之前做動畫過程中遇到的大坑
聰明的碼農們當然有辦法來解決這種情況。 大家都知道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
瀏覽一下，會發現，這時候是會有延時隱藏的效果的。很好，又發現新東西了
那漸變的效果怎么辦。。。。
聰明的碼農們又想起了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
瀏覽下先。。。。！！！！一切正常了
其實，visibility會在opacity生效后再應用。比如隱藏時，先opacity變為0，再應用了visibility:hidden 這時候就隱藏起來了，相關的事件也不會發生。 看來display:none這時候被拋棄了啊
當然，有人會說visibility:hidden始終是占着頁面空間的，display能夠減少頁面的repaint，還是要用display:none怎么做呢
聰明的碼農又想到了： 先把display變成block 然后延遲transition動畫的執行
當然啦 這就需要用到JS了
以上就是display和transition中發現的坑。。。。！