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版本都不支持此功能。