css3中animation中使用opacity或display的遇到的問題

animation中使用opacity或display的遇到的問題

在開發中碰到要使用animation來實作淡入淡出的效果，使用opacity，opacity:0的時候，其實它還是占頁面空間的，他會遮擋到它下面的層（不是視覺上）。而且綁定在它本身的一些事件也會觸發。

這時候想在opacity:0的時候，用display: none把他隐藏掉，但是會發現淡入淡出的效果全沒了，這也是之前做動畫過程中遇到的大坑，

解決辦法： 大家都知道visibility的效果其實跟 display 在一定程度上相似， 當然是一定程度上。 那為什麼說隻是一定程度上相似呢，因為它仍然是占空間的，那麼這時候看官一定會說，這麼用跟opacity壓根沒差別呀css3中transition和display的坑，但聰明的碼農們一定又想到，這時候，他是不會遮擋到下面的層的，也就是說 他跟opacity這樣的存在不同，onclick等事件是不會發生的。

我們來說下visibility， 常用到的是visible和 hidden 兩個值。但也可以是數值， 等于0時相當于hidden，而隻要大于0時，visibility就為visible。那我們利用這點完整代碼如下：

.isashow {
    opacity: 1;
    animation: fadeIn 1s;
}
.noshow{
    opacity: 0;
    animation: fadeOut 1s;
}
@keyframes fadeOut
{
    from {opacity: 1}
    to {opacity: 0}
}
@keyframes fadeIn
{
    from {opacity: 0}
    to {opacity: 1}
}