在动画期间隐藏滚动条

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; } 
}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论