使用 CSS 转换动画 max-height

Animating max-height with CSS transitions

提问by Madd0g

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;

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

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

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

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

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

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' s设置动画，因此它会延迟折叠效果。

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/（点击文本容器）

采纳答案by Madd0g

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 transitionstyle to the expanded class definition)

如果有人正在阅读这篇文章，我还没有找到解决方案并使用仅扩展效果（这是通过将transition样式移动到扩展类定义来实现的）

回答by egor.xyz

Fix delay solution:

修复延迟解决方案：

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

为元素放置cubic-bezier(0, 1, 0, 1) 转换函数。

scss

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

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

回答by Will Jenkins

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%。我已经看到其他答案建议使用动画 max-height 代替，但这意味着当您使用的 max-height 大于实际高度时，有时会出现延迟。

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.

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

回答by Johansrk

The solution is actually quite simple. Make a child div, that has the content. The parent div will be the one that expands collapses.

解决方法其实很简单。制作一个具有内容的子 div。父 div 将是展开折叠的那个。

On load the parent div will have a max-height. when toggling, you can check the child height by writing document.querySelector('.expand-collapse-inner').clientHeight;and set the maxheight with javascript.

加载时，父 div 将具有最大高度。切换时，您可以通过编写来检查子高度，document.querySelector('.expand-collapse-inner').clientHeight;并使用 javascript 设置 maxheight。

In your CSS, you will have this

在你的 CSS 中，你会有这个

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

回答by ROFLwTIME

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

JS小提琴演示