javascript - 在 CSS 中显示无淡出不起作用或隐藏 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; }
}

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

Answer 1

CSS 无法在 display: none 之间设置动画；和显示: block ；。更糟糕的是:它不能在 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>

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