使用CSS过渡动画最大高度

I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).

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

I'm giving one class max-height: 4em; overflow: hidden;

我给了一个班级最高身高：4em;溢出：隐藏;

and the other max-height: 255em; (I also tried the value none, which didn't animate at all)

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

this to animate: transition: max-height 0.50s ease-in-out;

这是动画：过渡：最大高度0.50s轻松进出;

I used CSS transitions to switch between them, but the browser seems to be animating all those extra em's, so it creates a delay in the collapse effect.

我使用CSS过渡在它们之间切换，但是浏览器似乎在动画所有那些额外的em，因此它会在崩溃效果中产生延迟。

Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that's the reason for the big value, so it doesn't cut off legit long text, only ridiculously long ones)

是否有一种方法（具有相同的精神 - 使用css类名）没有副作用（我可以设置较低的像素数，但这显然有缺点，因为它可能会切断合法文本 - 这是价值很大的原因，所以它不会切断合法的长篇文章，只会是荒谬的长篇文章）

See the jsFiddle - http://jsfiddle.net/wCzHV/1/ (click on the text container)

查看jsFiddle - http://jsfiddle.net/wCzHV/1/（单击文本容器）

4 个解决方案

#1

Fix delay solution:

修复延迟解决方案

Put cubic-bezier(0, 1, 0, 1) transition function for element.

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

#2

This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o)

这是一个古老的问题，但我只是想办法做到这一点，并想把它粘在某处，所以我知道在哪里可以找到它我应该再次需要它：o）

So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when the max-height you use is larger than the actual height.

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

The idea is to use jQuery on load to find and explicitly set the heights of the "sectionContent" divs. Then add a css class 'noHeight' to each a click handler to toggle it:

我们的想法是在加载时使用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');
    });
});

For completeness, the relevant css classes:

为完整起见，相关的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;
}

Now the height transitions work without any delays.

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

#3

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

如果有人正在阅读这篇文章，我还没有找到解决方案并且只进行了扩展效果（通过将过渡样式移动到扩展类定义来实现）

#4

You can accomplish this just fine using jQuery Transit:

您可以使用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"); });
        }
    });
});

You can definitely tidy it up a bit to your liking, but that should do what you want.

你可以根据自己的喜好稍微整理一下，但这应该做你想要的。

JS Fiddle Demo