html - CSS transition on height auto 仅在添加类时有效，在删除类时无效

Question

目标是在从 0 到 auto 高度的 div 高度上使用 CSS 转换，以便它作为视觉对象滑动打开和关闭。

因为 CSS height: auto 不能有过渡，我使用 max-height 作为过渡。当我添加“扩展”类时，高度会自动...

但是当打开和关闭高度时，它只会在添加类时转换。删除类(将 height 改回 0 并将 max-height 改回 0)过渡不存在并且是即时的

.information{
  height: 0;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;


  &.expanded{
    height: auto;
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }

Answer 1

这是高度，你在max-height上添加了transition，但是你的height变成了0 立即删除扩展类。

您可以在 .information 类上设置 height: auto;，仅在 max-height 上进行过渡。

.information{
  height: auto;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;


  &.expanded{
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }