在 CSS 中显示 none 淡出不起作用或隐藏 div

Question

我有以下 CSS 转换 -

fadeinout-animate {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}
@keyframes fadeinout {
  100% { opacity: 0;display:none; }
}

但是，当我将此 class 添加到 Angular 模板中的 div 时，显示 none 有效，但空白 space 为 200*200保持原样。（如果我检查元素，我仍然看到单独的红色背景消失了，但是在浏览器中手动应用显示 none 内联样式会隐藏或删除 div）如果我使 height:0 那 div 关闭但它会影响行为。我该如何解决？

Answer 1

CSS 无法在 显示之间设置动画：none；和显示：块；。更糟糕的是：它不能在 height: 0 和 height: auto 之间设置动画。所以你需要硬编码高度。

这是 CSS 的尝试：

预期：边框应该会塌陷但是会塌陷吗？

#a {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  opacity: 0;
}

@keyframes fadeinout {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

<div style="border:1px solid black;width:200px;">
  <div id="a">
  </div>
</div>

输出：不，不会。

现在，让我们试试这个..

#a {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  opacity: 0;
}

@keyframes fadeinout {
  50% {
    opacity: 1;
  }
  99% {
    opacity: 0;
    height: 200px;
  }
  100% {
    height: 0px;
  }
}

<div style="border:1px solid black;width:200px;">
  <div id="a">
  </div>
</div>

因此，我们基本上在过渡结束后通过将其高度降低为 0 来折叠 div，从而折叠父容器标签。

Answer 2

添加到@Highdef 答案，。

如果不介意加一点Javascript，可以监听动画结束事件，手动设置显示none。

const e = document.getElementById("a");
e.addEventListener("animationend", (ev) => {
  if (ev.type === "animationend") {
    e.style.display = "none";
  }
}, false);

#a {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  opacity: 0;
}

@keyframes fadeinout {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div style="border:1px solid black;width:200px;">
  <div id="a">
  </div>
</div>

在 CSS 中显示 none 淡出不起作用或隐藏 div

Display none in CSS fade out does not work or hide the div

html

javascript

css

fadein

angularjs