如何仅使用 CSS 使 Div 具有 Display: None 动画？

带显示的 CSS 动画：无困境

使用 CSS 动画时，您可能会遇到希望稍后滑入 div 的情况而其他元素最初填充其空间。但是，如果将动画 div 设置为 display: none，它会继续占用空间并阻止其他元素正常流动。

要解决此问题，您需要一种方法来确保动画 div 不会在指定时间出现之前不会占用空间。虽然您可以考虑使用 jQuery，但本文重点介绍纯 CSS 解决方案，以实现更平滑和受控的计时。

对高度进行硬编码

关键在于对高度进行硬编码动画 div。这样，它就保留了必要的空间，而不会使其自身可见。然后，您可以使用 CSS 动画在适当的时刻更改其高度。

例如，请考虑以下代码：

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

带有关键帧的动画

高度固定后，您可以使用关键帧来为其变化设置动画。下面是一个示例：

#main-image.fadeInDownBig {
    height: 300px;
}

在此示例中，fadeInDownBig 类在所需时间应用于主图像 div，触发过渡到其预期高度。

浏览器支持和演示

这种纯 CSS 解决方案在现代浏览器中运行良好。您可以通过以下链接观看现场演示：

• http://jsfiddle.net/duopixel/qD5XX/

通过使用此技术，您可以实现流畅的 CSS 动画，而不会出现 display: none 的陷阱，确保您的 div 按预期无缝流动。

以上是如何仅使用 CSS 使 Div 具有 Display: None 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！