CSS переход на высоту автоматически работает только при добавлении класса, а не при удалении класса

Question

Цель состоит в том, чтобы использовать CSS-переход по высоте div, изменяющейся с 0 до auto height, чтобы он открывался и закрывался как визуальный элемент.

Поскольку CSS height: auto не может иметь переход, я использовал max-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

Вы должны создать класс, который отменяет влияние информационного класса, и назначить его вместо удаления информационного класса.Я надеюсь, что это будет полезно.

Answer 2

Это height, вы добавляете transition на max-height, но ваш height меняется сразу на 0 при удалении расширенного класса.

Вы можете установить height: auto; на.information класс с переходом только на 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;
  }
 }