高度自动上的 CSS 过渡仅在添加类时有效，而不是在删除类时

Question

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

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

但是在打开和关闭高度时，它仅在添加类时才会转换。删除类（将高度更改回 0 并将最大高度更改回 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

这是height，您在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;
  }
 }

Answer 2

你应该创建一个类来反转信息类的影响并分配它而不是删除信息类。 希望对你有用。