html动画怎么隐藏,使用css3动画显示？如何在动画期间/之后隐藏/取消隐藏元素？...

我没有设置元素的高度或宽度,而是找到了一种不同的方法,对我而言,并不像强迫高度达到99.9％那样狡猾.这是我想出的：

首先,而不是使用显示隐藏&显示它,我使用了可见性,因为它仍然可以中断我们的动画并最终导致它失败,我最初设置了我们的过渡属性：

注意：我将为此演示保留其他前缀：

.item {

transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;

}

所以我们正在做的是将visibility属性的转换设置为0,但是将它延迟到完成淡出所需的时间(不透明度);

因此,当我们希望它可见时,我们添加了visilble类：

.item.visible {

transition-delay: 0s;visibility: visible;opacity: 1;

}

因此我们将延迟设置为0,以便我们可以在转换时覆盖状态,显然我们不想延迟可见性,我们希望直接设置它,然后设置不透明度的动画;

然后当我们想隐藏它时：

.item.hidden {

opacity: 0; visibility:hidden;

}

然后所有这一切都是将我们的不透明度转换回0,并将延迟保持在0.7,这样它就不会在dom中“消失”直到不透明度完成.

我希望这有助于其他观众