使用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

修复延迟解决方案

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

Answer 2

这是一个古老的问题,但我只是想办法做到这一点,并想把它粘在某处,所以我知道在哪里找到它我应该再次需要它: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;
}

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

Answer 3

万一有人在读此书，我还没有找到解决方案，而是采用了仅扩展效果（通过将transition样式移至扩展的类定义来实现）