显示没有淡出不起作用或隐藏在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，因此，母体容器标签已折叠。