动画期间隐藏卷轴

CSS 仍然无法动画到自动尺寸。

.dropdown {
  transition: 0.2s;
  height: 0;
}
.dropdown.open {
  /* 高度会改变，但不会动画。 */
  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 频道的视频，展示协作模式，我们用它来找出问题/解决方案：

以上是动画期间隐藏卷轴的详细内容。更多信息请关注PHP中文网其他相关文章！