CSS 动画可以与设置为'display: none”的元素一起使用吗？

CSS 动画和显示元素

您已尝试对最初具有 display: none 的元素使用 CSS 动画。虽然这似乎是动态显示和隐藏元素的简单方法，但 CSS 限制阻止了它。

显示问题：无

CSS 动画无法处理之间的转换display: none 和 display: block 或 height: 0 和 height: auto 之间。如果可能的话，您需要对高度进行硬编码，否则需要使用 JavaScript。

设置高度

在硬编码高度不可行的情况下，您可以使用溢出:hidden 以隐藏元素并将其高度设置为 0。当您准备好显示它时，将溢出设置回可见并将高度设置为完整动画

示例代码

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from { height: 0; }
  to { height: 300px; }
}

HTML:

<div>

在此示例中，溢出： hide 确保元素在其高度从 0 到动画时保持隐藏状态300px。

注意： CSS 示例使用普通 CSS。如果您使用 Animate.css，则可以将 @keyframes 规则替换为相应的 Animate.css 类。

这种方法允许您在不依赖于 display: none 或 jQuery 的情况下平滑地对元素进行动画处理，从而提供更平滑的过渡以及更精准的时序控制。

以上是CSS 动画可以与设置为'display: none”的元素一起使用吗？的详细内容。更多信息请关注PHP中文网其他相关文章！