使用 CSS 过渡动画 max-height

我想创建一个仅由类名驱动的展开/折叠动画（javascript 用于切换类名）。

我正在上一堂课max-height: 4em; overflow: hidden;

和另一个max-height: 255em;（我也尝试过这个值none，根本没有动画）

这个动画：transition: max-height 0.50s ease-in-out;

我使用 CSS 过渡在它们之间切换，但浏览器似乎正在为所有这些额外的内容设置动画em的，所以它会造成崩溃效果的延迟。

有没有一种方法可以做到这一点（本着同样的精神 - 使用CSS类名）没有副作用（我可以设置较低的像素数，但这显然有缺点，因为它可能会切断合法文本 - 这就是大值的原因，所以它不会切断合法的长文本，只会切断长得可笑的文本）

请参阅 jsFiddle -http://jsfiddle.net/wCzHV/1/ http://jsfiddle.net/wCzHV/1/（单击文本容器）

修复延迟解决方案：

为元素设置cubic-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;
}