使用CSS变换设置最大高度动画

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

我给一个类

最大高度：4em；溢出：隐藏

另一个
最大高度：255em（我还尝试了值
none
，它根本没有动画）

要设置动画，请执行以下操作：
过渡：最大高度0.50秒缓进缓出

我使用CSS转换在它们之间切换，但浏览器似乎正在为所有那些额外的
em
设置动画，因此它在折叠效果中创建了延迟

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

请参阅JSFIDLE-（单击文本容器）
如果有人正在阅读本文，我还没有找到解决方案，而是使用了仅扩展的效果（这是通过将
转换
样式移动到扩展的类定义中实现的）
您可以使用以下方法很好地完成此操作：

你当然可以根据自己的喜好把它整理一下，但那应该是你想要的

这是一个老问题，但我只是想出了一个办法，想把它放在某个地方，这样我就知道在哪里可以找到它，如果我再次需要它：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;
}

现在，高度转换工作无任何延迟。
修复延迟解决方案：

将三次贝塞尔（0，1，0，1）变换函数用于元素

scss
css
解决办法其实很简单。创建一个子div，它包含内容。父div将是展开和折叠的div

加载时，父div将具有最大高度。切换时，可以通过写入
document.querySelector（'.expand-collapse-inner'）.clientHeight检查子高度并使用javascript设置最大高度

在您的CSS中，您将拥有以下内容

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

使用显示：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 */
}

不完美的解决方案：这可以接受吗？@passway-可能有负边距，但您的示例似乎不支持任意高度或显示预设行数（这两种情况在原文中都得到支持，并且都是必要的），这就是为什么我不将其作为答案发布的原因。有人问过这个问题，我想说，在纯CSS中几乎不可能实现（如果您不想硬编码一些值的话）。如果你真的需要这么做的话，就让JS参与进来。我担心这可能不可能，那太糟糕了，我讨厌看到它几乎在工作。Anks，我知道使用javascript的方法，我想通过改变类名来实现这一点，你介意用JS Fiddle或类似的方式发布解决方案吗？现在是2016年，它仍然没有解决方案。这真是太遗憾了。它就像一个魔咒，尽管我注意到如果窗口的大小调整到足以挤压溢出隐藏容器下面的元素，高度不会正确更新。为了解决这个问题，我将accorbian内容放在另一个div中，不隐藏溢出，在页面加载时设置该div的高度，然后在页面上放置一个调整大小的处理程序，以确保accorbian的高度始终与内部div匹配。工作得很好！据我所知，此解决方案仅在内容具有固定高度（100px/100em/etc）时有效，但如果内容具有自动高度、取消设置高度、100%或类似的高度，则不会出现动画。这是纯css的最佳方式。感谢您的提醒，我刚才丢失了这条曲线。有人能解释一下
&.full
在这个上下文中是什么意思吗？@Jakub
&.full
的意思是：“当类
.full
被添加到带有类
.text
的元素中时，按如下方式更新CSS…”这基本上就是SCSS执行
.text.full}的方法
，这就是它在普通CSS中的外观。这叫做嵌套，是Sass/SCSS的一个特性。这个答案非常需要解释。它被提升了不少，但似乎工作不正常。我所看到的唯一效果是，收缩过渡仅为0.5秒，而扩展过渡为1秒。在进一步研究之后，我可以肯定地说，这不是一个解决方案，这是一个变通办法，甚至不是一个好办法。唯一发生的事情基本上是动画的持续时间较短，而且所使用的函数基本上是一个极端的
放松
。因此，基本上，你只是在快速收缩最大高度的1000px，并最终减慢速度，因此最后一位看起来有点像一个常规的
易入易出的
。再说一遍：不是修复，而是一种解决方法，不是一个好方法。
.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;
}

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

.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 */
}