在动画期间隐藏滚动条

前端小智 • 2021-09-16 19:57:47 • 前端

CSS 仍然无法为自动尺寸auto设置动画。

.dropdown {
  transition: 0.2s;
  height: 0;
}
.dropdown.open {
  /* the height will change, but it won't animate. */
  height: auto;
}

但可以尝试使用 JavaScript 技巧来实现，Brandon Smith 不久前概述了这种方法。不过我总是想到这个解决方案，因为它太简单了：

.dropdown {
  transition: 0.2s;
  max-height: 0;
}
.dropdown.open {
  /* 🎉 */
  max-height: 400px;
}

另一个问题是滚动条。

当我们设置 max-height: 0; 时，我们还需要 overflow: hidden;以确保下拉菜单在关闭时实际上是隐藏的。当下拉菜单打开时，我们可能应该使用 overflow: auto;这样我们就不会意外切断内容，以防下拉的自然高度在展开后高于最大高度。overflow：auto；在引入另一个问题的同时解决了这个问题：在扩展期间，我们的下拉菜单将始终具有至少部分扩展的滚动条，即使最终的扩展高度不需要它们。尴尬了！

CSS trickery来拯救。

我们仍然可以使用 overflow: auto;在展开状态 - 我们将在动画期间覆盖它。正如我们在伟大的 CSS 特异性之战中了解到的那样，@keyframes 具有在它们处于活动状态时覆盖任何内容的惊人能力。让我们不要使用它们来为开口设置动画，而只是为了滚动条隐藏功能：

.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s ease-in-out;
}
.dropdown.open {
  overflow: auto;
  max-height: 400px;
  animation: hide-scroll 1.2s backwards;
}
@keyframes hide-scroll {
  from, to { overflow: hidden; } 
}

CodePen Embed Fallback

尝试将高度调整为较小的值，以查看在动画过程中如何看不到滚动条，但仅在需要它们时才看到。当滚动条弹出时，这会导致一些抖动，但在我的情况下这是可以接受的，因为它很少发生。如果您绝对想停止抖动，您可能会一直将（自定义）滚动条应用于下拉列表，并可能需要在动画期间调整滚动条的样式。