仅使用 CSS 完成动画时如何使 div 不占用空间？答案

【问题标题】：How to make div not take up space when completed animation using CSS only?仅使用 CSS 完成动画时如何使 div 不占用空间？
【发布时间】：2021-01-28 11:02:42
【问题描述】：

我正在使用 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>

【问题讨论】：

很明显，您需要确保更改为其他内容。 animate.css 不适合您，您将无法找到适用于所有已定义动画的通用解决方案

标签： css animation animate.css

【解决方案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>

【讨论】：