Question

我有以下代码来显示/隐藏基于css类的轮播上的按钮。一切都按预期工作，除了hideButton，显示不设置为＆＃34; none＆＃34;动画完成后。

效果是，虽然按钮会消失，但它仍然位于基础项目的顶部并阻止点击次数。

.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

您无法为display属性设置动画。

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

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

Answer 2

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

查看我刚刚创建的小提琴：

https://jsfiddle.net/uvxeqaLn/

CSS animation-fill-mode不适用于display：none

2 个答案: