如何应用溢出：未设置； CSS 转换后？

Question

  #slide-buttons.horizontal {
      max-width: 0;
      transition:max-width 0.9s ease-out;
      overflow: hidden;
  }
  #slide-buttons.horizontal.slide-in {
      max-width: 1000px;
      /*overflow: unset;*/
  }

我正在尝试使用上面的样式制作滑入式菜单。我想从最大宽度为零开始，隐藏溢出，然后过渡到最大宽度 1000px 并未设置溢出以模拟菜单“滑入”（或从无到有扩展）。我遇到的问题是溢出属性不是过渡属性，因此我无法在要使用的两个溢出值之间使用过渡延迟。有谁知道我如何应用溢出：取消设置属性after我的最大宽度转换完成？

Answer 1

考虑到您如何构建类，您可能正在使用 JS 来使菜单工作。在这种情况下，您可以在启动菜单动画后添加控制 JS 溢出的类，并延迟动画播放的时间（使用

setTimeout()

）。

另请注意，

unset

不是

overflow

的有效值。您可能想要

initial

或者明确设置

auto

或类似的东西。

Answer 2

您可以创建一个 CSS 动画，将

overflow

从

hidden

更改为

initial

，并延迟过渡的持续时间。

.max-width-container.slide-in {
  max-width: 1000px;
  animation-duration: 0;
  animation-delay: 1s;
  animation-name: revert-overflow;
  animation-fill-mode: forwards;
}

@keyframes revert-overflow {
  from {
    overflow: hidden;
  }

  to {
    overflow: initial;
  }
}

此方法的工作示例（使用 jQuery 演示最终效果）：

$(".toggle-container-button").click(function() {
  $(".max-width-container").toggleClass("slide-in");
})

.max-width-container {
  margin-top: 20px;
  background-color: red;
  max-width: 0;
  height: 100px;
  transition: max-width 1s ease-out;
  overflow: hidden;
}

.max-width-container.slide-in {
  max-width: 500px;
  animation-duration: 0;
  animation-delay: 1s;
  animation-name: revert-overflow;
  animation-fill-mode: forwards;
}

.overflowing-element {
  width: 550px;
  height: 50px;
  background-color: green;
}

@keyframes revert-overflow {
  from {
    overflow: hidden;
  }

  to {
    overflow: initial;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 

<button class="toggle-container-button">
  Toggle
</button>

<div class="max-width-container">
  <div class="overflowing-element"></div>
</div>