如何应用溢出：未设置； 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 并取消设置溢出以模拟菜单“滑入”（或从无到有扩展）。我遇到的问题是溢出属性不是过渡属性，所以我不能在我想使用的两个溢出值之间使用过渡延迟。有谁知道我如何应用溢出：未设置属性在我的最大宽度转换完成后？

Answer 1

鉴于您的课程结构，您可能正在使用 JS 来制作菜单。在这种情况下，您将在启动菜单动画后从您的 JS 添加控制溢出的类，延迟动画所花费的时间（使用setTimeout()）。

另外，请注意unset 不是overflow 的有效值。您可能想要 initial 或者明确设置 auto 或类似的东西。