显示没有淡出不起作用或隐藏在div

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下的CSS过渡 -显示没有淡出不起作用或隐藏在div

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会影响行为。我如何解决它？

回答：

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

回答：

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，因此，母体容器标签已折叠。

以上是 显示没有淡出不起作用或隐藏在div 的全部内容， 来源链接： utcz.com/qa/262664.html

回到顶部