CSS动画填充模式不适用于显示：无

Question

我有以下代码来显示/隐藏基于css类的传送带上的按钮。一切按预期工作，除了hideButton之外，动画完成后显示未设置为“无”。

效果是，尽管按钮消失，它仍然位于基础项目之上，并防止点击击中它们。

.pills-tab-carousel__button { 
    position: absolute; 
    top: 0; 
    height: 100%; 
    line-height: 100%; 
    width: 64px; 
    animation: showButton .5s forwards; 
} 

.pills-tab-carousel__button--hidden { 
    animation: hideButton .5s forwards; 
} 

@keyframes hideButton { 
    0% { 
    opacity: 1; 
    display: block; 
    } 
    100% { 
    opacity: 0; 
    display: none; 
    } 
} 

@keyframes showButton { 
    0% { 
    opacity: 0; 
    display: none; 
    } 
    1% { 
    opacity: 0.01; 
    display: block; 
    } 
    100% { 
    opacity: 1; 
    display: block; 
    } 
} 

Answer 1

为什么不使用visibility: hidden;，因为你的元素已经是绝对位置，所以你不必担心布局。

退房我刚创建的小提琴：

https://jsfiddle.net/uvxeqaLn/

Answer 2

您不能为display属性设置动画。

作为替代方案，您可以设置属性pointer-events: none;，这将允许点击通过隐藏元素。

请注意，IE11之前的任何IE版本都不支持此功能。