本文介绍了CSS动画-填充-模式不适用于显示：无的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码来显示/隐藏基于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;
}
}
推荐答案
既然您的元素已经是绝对位置，为什么不使用visibility: hidden;，所以您不需要担心布局。
查看我刚刚创建的小提琴：
https://jsfiddle.net/uvxeqaLn/
这篇关于CSS动画-填充-模式不适用于显示：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！