显示没有在CSS淡出效果不工作或隐藏div。

I have the following CSS transition -

我有以下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; }
}

But, when I add this class to a div in Angular template, display none works but a blank space of 200*200 stays as is. (If I inspect element I still see that the red background alone is gone but manually applying display none inline style in browser hides or removes div) If i make height:0 that div goes off but it impacts behavior. How do I fix it?

但是，当我将这个类添加到一个有角模板的div中时，显示没有任何工作，但是一个200*200的空白区域仍然保持原样。(如果我检查元素，我仍然会发现只有红色的背景已经消失了，但是在浏览器中手动应用显示没有内联样式)如果我做了高度:0那个div会消失，但是它会影响行为。我怎么修理它?

2 个解决方案

#1

To add to @Highdef answer,.

要添加到@Highdef答案，。

If you don't mind adding a bit of Javascript, you can listen for the animation end event, and set display none manually.

如果您不介意添加一点Javascript，那么您可以侦听动画结束事件，并且设置不手动显示。

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>

#2

CSS can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height.

CSS不能在显示之间动画:没有;和显示:块;。更糟糕的是:它不能在高度:0和高度之间移动。所以你需要硬编码高度。

Here's an attempt with CSS:

下面是CSS的尝试:

Expected: the border should collapse but will it?

预期:边境会崩溃，但会吗?

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

Output: No, it won't.

输出:不,它不会。

Now, lets try this..

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

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

So, we basically collapsed the div after its transition was over by reducing its height to 0 and thus the parent container tag collapsed.

因此，我们基本上在它的转换结束后，将它的高度降低到0，从而导致父容器标签崩溃。

#1