Question

我有以下CSS过渡 -

＆＃13;

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; }
}

＆＃13;

但是，当我将此类添加到Angular模板中的div时，display none无效，但200 * 200的空格保持不变。（如果我检查元素我仍然看到单独的红色背景已经消失但是在浏览器隐藏中手动应用显示无内联样式或删除div）如果我使高度：0表示div已关闭但它会影响行为。我该如何解决？

Answer 1

CSS无法在 display：none 之间制作动画。和显示：阻止;。更糟糕的是：它不能在高度：0和高度：自动之间设置动画。所以你需要硬编码高度。

以下是CSS的尝试：

预计：边框会崩溃但是会吗？

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

输出：不，它不会。

现在，试试吧..

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

因此，我们基本上在div转换结束后将其高度降低为0，因此父容器标签已折叠。

Answer 2

添加到@Highdef的答案，。

如果您不介意添加一些Javascript，可以监听动画结束事件，并手动设置display 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中的无显示淡出不起作用或隐藏div

2 个答案: