修复延迟解决方案：
为元素设置三次Bezier（0，1，0，1）过渡函数。

scss

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);

  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
  }
}

字符串

css

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.text.full {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}

型

这是一个老问题，但我只是想出了一个方法来做，并希望坚持它的地方，所以我知道在哪里找到它，我应该再次需要它：o）
因此，我需要一个 accordion 与可点击的“sectionHeading”div，显示/隐藏相应的“sectionContent”div。部分内容div具有可变高度，这会产生一个问题，因为您无法将高度设置为100%。我看到其他的答案建议动画max-height代替，但这意味着有时你会得到延迟时，max-height你使用的是大于实际高度。
这个想法是在加载时使用jQuery来查找并显式设置“sectionContent”div的高度。然后添加一个css类'noHeight'到每个点击处理程序来切换它：

$(document).ready(function() {
    $('.sectionContent').each(function() {
        var h = $(this).height();
        $(this).height(h).addClass('noHeight');
    });
    $('.sectionHeader').click(function() {
        $(this).next('.sectionContent').toggleClass('noHeight');
    });
});

字符串
为了完整起见，相关的css类：

.sectionContent {
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.noHeight {
        height: 0px !important;
}

型
现在，高度过渡工作，没有任何延迟。

如果有人正在阅读这篇文章，我还没有找到一个解决方案，并且使用了仅扩展的效果（这是通过将transition样式移动到扩展的类定义来实现的）

使用display：flex。这将工作：

.parent > div {
  display: flex;
  flex-direction: column;
  height: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
}

.parent > div.active {
  opacity: 1; 
  height: 100%;
  max-height: none; /* important for animation */
}

字符串

解决办法其实很简单。创建一个包含内容的子div。父div将是展开/折叠的div。
在加载时，父div将有一个max-height。切换时，你可以通过写document.querySelector('.expand-collapse-inner').clientHeight;来检查子高度，并使用JavaScript设置maxheight。
在你的CSS中，你会有这个

.parent {
transition: max-height 250ms;
}

字符串

有一个新的纯CSS解决方案，解决了所有的问题，其他CSS解决方案。您可以使用grid-template-rows: 0fr;进行折叠，使用1fr;进行展开。查看代码以了解详细信息：

/* theme */

.panel-expand {
  background-color: black;
  color: white;
  padding: 20px;
  width: 400px;
  transition: all 200ms ease-in-out;
}

/* mechanism */

.panel-expand {
  display: grid;
  grid-template-rows: 0fr;
}

.panel-expand:hover {
    grid-template-rows: 1fr;
}

.panel-expand__content {
  overflow: hidden;
}

个字符
我在Kevin Powell的视频https://www.youtube.com/watch?v=B_n4YONte5A中发现了它

您可以使用jQuery Transit来很好地完成此操作：

$(function () {
    $(".paragraph").click(function () {
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

字符串
你绝对可以按照你的喜好整理一下，但那应该能做到你想要的。

JS Fiddle Demo