Question

我有一个包含大量对象的区域，包括可以单击的按钮等。

动画不透明效果很好，但我发现不可见的按钮仍然在画布上的堆栈中，因此仍然可以点击。我想运行一个不透明度动画，然后在项目完成后将项目设置为隐藏状态......这可能吗？

我的尝试产生一个淡入淡出的动画，然后突然掉落页面，然后才能运行淡出动画。

我基本上试图避免画布上其他元素的干扰，但仍然将它们保留在那里。

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

}

我的行为很奇怪，因为该项目在完全消失之前消失，或者可能在淡出开始时消失。

任何解决方案？

谢谢，迈克尔。

Answer 1

我认为您的问题只是在某些关键帧中省略了visibility属性。

在所有关键帧中陈述所有动画属性总是一个好主意

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

fiddle

CSS动画不透明度，然后将可见性设置为隐藏？

1 个答案: