Question

目标是在从0到auto高度的div高度上使用CSS过渡，以使其以可视方式滑动打开和关闭。

由于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

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

Answer 2

您应该创建一个类，该类可以反转信息类的影响并分配它，而不是删除信息类。我希望它会有用。

高度上的CSS过渡仅在添加类时有效，而在删除类时不起作用

2 个答案: