动画期间隐藏滚动条 | CSS-Tricks

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

现在我们有了这个400px的魔法数字，这真的不是理想的。但事实上它有效且非常简单，使其极具吸引力，以至于我一直在生产中使用它。

但魔法数字并不是唯一的问题。**另一个问题是滚动条。**

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

CSS 技巧来救援。

我们仍然可以在展开状态下使用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; } 
}

这解决了问题！

尝试将高度调整为更小的值，看看您如何在动画期间看不到滚动条，而只在需要时在最后看到。这会导致滚动条弹出时出现一点抖动，但在我的情况下是可以接受的，因为这种情况很少发生。如果您绝对想要停止抖动，您可能会始终对下拉菜单应用（自定义）滚动条，并且可能根据需要在动画期间调整滚动条的样式。

感谢@keyframers 的 Stephen Shaw 为此技巧。在我为 CodePen 上的东西工作时，我把他拉来帮我解决这个问题。我们决定将这个技巧制作成 CodePen 频道的视频，展示协作模式，我们用它来找出问题/解决方案。

评论