使用CSS过渡设置最大高度动画

Question

我想创建一个仅由类名驱动的展开/折叠动画(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/ (单击文本容器)

Answer 1

如果有人正在阅读这篇文章，我还没有找到解决方案，只使用了expand-only效果(这是通过将transition样式移动到扩展的类定义来实现的)

Answer 2

修复延迟解决方案：

将三次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;
}

Answer 3

这是一个古老的问题，但我只是找到了一种方法，想把它贴在某个地方，这样我就知道在哪里可以找到它，如果我再次需要它的话:o)

所以我需要一个带有可点击的"sectionHeading“div的手风琴，它可以显示/隐藏相应的"sectionContent”div。节内容div有可变的高度，这会产生一个问题，因为你不能将高度设置为100%。我已经看到其他的答案建议改为动画最大高度，但这意味着当你使用的最大高度大于实际高度时，有时你会得到延迟。

其思想是在加载时使用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;
}

现在高度转换工作，没有任何延迟。