如何在 CSS 中使用“display: none”对 Div 进行动画处理？

CSS 动画和显示无

尝试使用 CSS 对 div 进行动画处理时，了解 display 属性的限制非常重要。同时显示：无；属性可以隐藏视图中的元素，但不会将其从文档流中删除。这可能会导致在对占用页面空间的元素进行动画处理时出现问题。

要达到所需的效果，您无法直接从 display: none; 切换主 div；显示：块；。相反，您需要将主 div 的高度设置为 0 并使用 Overflow:hidden;最初隐藏它。然后，当主 div 滑入时，您可以将 div 的高度设置为所需的动画值。

这是一个示例：

#main-div {
    height: 0;
    overflow: hidden;
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#main-div.fadeInDownBig {
    height: 375px;
}

这将导致主 div 在 3.5 秒后滑入，在进入视口时将其他 div 向下推到页面上。

请注意，此技术也适用于其他属性，例如不透明度。例如，您可以通过将 div 的不透明度从 0 逐渐增加到 1 来使其淡入淡出。

以上是如何在 CSS 中使用“display: none”对 Div 进行动画处理？的详细内容。更多信息请关注PHP中文网其他相关文章！