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

CSS animation-fill-mode not working for display:none(CSS动画-填充-模式不适用于显示:无)

本文介绍了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动画-填充-模式不适用于显示:无的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS动画-填充-模式不适用于显示:无

基础教程推荐