在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的空白。 （如果我檢查元素，我仍然會看到僅紅色背景消失了，但是在瀏覽器中手動應用顯示無內聯樣式會隱藏或刪除div）如果我將height：0設置為div，但會影響行為。 我如何解決它？

Answer 1

CSS無法在顯示之間設置動畫：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來基本上折疊了div，因此父容器標簽也折疊了。

Answer 2

要添加到@Highdef答案，。

如果您不介意添加一些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>