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