顯示沒有淡出不起作用或隱藏在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; } 
 
}

但是，當我在角模板這個類添加到一個div，顯示沒有作品，但200 * 200的空白保持不變。 （如果我檢查元素，我仍然看到單獨的紅色背景已經消失，但手動應用在瀏覽器中隱藏或刪除div時不顯示任何內聯樣式）如果我創建height：0，那div會影響行爲。我如何解決它？

Answer 1

要添加到@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>

Answer 2

CSS無法在之間生成動畫display：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>

所以，我們基本上崩潰了DIV後的轉變是在通過降低其高度爲0，因此，母體容器標籤已摺疊。