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