我想创建一个仅由类名驱动的展开/折叠动画（javascript 用于切换类名）。
我要上一节课max-height: 4em; overflow: hidden;
和另一个max-height: 255em;（我也尝试了 value none，它根本没有动画）
这个动画：transition: max-height 0.50s ease-in-out;
我使用 CSS 过渡在它们之间切换，但浏览器似乎正在为所有这些额外em的 's 设置动画，因此它会在折叠效果中产生延迟。
有没有一种方法（本着同样的精神 - 使用 css 类名）没有那种副作用（我可以减少像素数，但这显然有缺点，因为它可能会切断合法文本 - 那是大价值的原因，所以它不会切断合法的长文本，只有可笑的长文本）
请参阅 jsFiddle - http://jsfiddle.net/wCzHV/1/（单击文本容器）
修复延迟解决方案：
为元素放置cubic-bezier(0, 1, 0, 1) 转换函数。
.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;
}
}
.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)
所以我需要一个带有可点击的“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样式移动到扩展类定义来实现的）
解决方案其实很简单。制作一个包含内容的子 div。父 div 将是展开折叠的那个。
加载时，父 div 将具有最大高度。切换时，您可以通过编写检查孩子身高document.querySelector('.expand-collapse-inner').clientHeight;并使用 javascript 设置 maxheight。
在您的 CSS 中，您将拥有这个
.parent {
transition: max-height 250ms;
}
使用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 */
}
您可以使用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"); });
}
});
});
您绝对可以根据自己的喜好对其进行整理，但这应该可以满足您的要求。