如何使div在只使用CSS完成动画时不占用空间

Question

我正在使用Animate.css使div垂直向上滑动并消失。滑出动画可以工作，但它保留了div的原始空间。有没有办法让div在完成滑出动画时不占用空间？

注意，我知道为什么会发生这种情况(animate.css使用translate3d而不是height/max height(。所以我知道我可以写自己的滑出动画，但我想继续使用animate.css，因为它有很多有用的动画。我只需要想办法让div在完成滑出/淡出/反弹等动画时不占用空间？如果我想不出一种方法来做到这一点，我必须为弹跳、淡入淡出、缩放和滑动编写所有自己的自定义动画。我只想使用animate.css(除非有人知道更好的css动画库？(

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>

<p>Some text above</p>
<div class="animate__animated animate__slideOutUp" style="background-color: red">I will slide up</div>
<p>Some text below. I should move up when the above div slides out</p>

Answer 1

对您有用的.fadeOutUp而不是.slideOutUp呢？

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>

<p>Some text above</p>
<div class="animate__animated animate__fadeOutUp" style="background-color: red">I will slide up</div>
<p>Some text below. I should move up when the above div slides out</p>