我有一个区域有很多对象,包括可以点击的按钮等。
动画不透明度效果很好,但我发现不可见的按钮仍然在 Canvas 上的堆栈中,因此仍然可以点击。我想运行不透明动画,然后在完成后将元素设置为可见性隐藏...这可能吗?
我的尝试产生了一个淡入的动画,但在淡出动画可以运行之前突然从页面上消失了。
我基本上是在尝试避免 Canvas 上其他元素的干扰,但仍将它们保留在那里。
.item { opacity: 0; visibility: hidden; }
/* when a class gets added, it animates */
.animate .item {
animation: fadeIn 2s 1s 1 normal forwards ease-out,
fadeOut 2s 3s 1 normal forwards ease-out;
}
@keyframes fadeOut {
1% { opacity: 1; }
99% { opacity: 0; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes fadeIn {
1% { opacity: 0; visibility: visible; }
2% { opacity: 0; }
100% { opacity: 1; }
}
我遇到了故障行为,因为该元素在完全淡出之前消失,或者可能在淡出开始时消失。
有什么解决办法吗?
谢谢, 迈克尔。
最佳答案
我认为您的问题只是您在某些关键帧中省略了可见性属性。
声明在所有关键帧中动画的所有属性总是一个好主意
@keyframes fadeIn {
1% { opacity: 0; visibility: hidden; }
2% { opacity: 0; visibility: visible;}
100% { opacity: 1; visibility: visible;}
}
@keyframes fadeOut {
1% { opacity: 1; visibility: visible;}
99% { opacity: 0; visibility: visible;}
100% { opacity: 0; visibility: hidden; }
}
关于CSS 动画不透明度,然后将可见性设置为隐藏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22326782/