使用 CSS 过渡动画最大高度

Question

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

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

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

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

我使用 CSS 过渡在它们之间切换，但浏览器似乎正在为所有这些额外的 em 设置动画，因此它会在折叠效果中产生延迟。

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

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

Answer 1

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

Answer 2

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

您绝对可以根据自己的喜好整理一下，但这应该可以满足您的需求。

JS Fiddle Demo

Answer 3

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

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

Answer 4

修复延迟解决方案：

为元素放置cubic-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 5

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

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

在你的 CSS 中，你会有这个

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

Answer 6

使用 display: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 */
}