css3 – 使用CSS转换动画最大高度

我想创建一个只有类名的扩展/折叠动画(javascript用于切换类名).

我给一个班最高高度：4em;溢出：隐藏;

而另一个max-height：255em; (我也尝试过没有价值,没有动画)

这个动画：转换：max-height 0.50s ease-in-out;

我使用CSS过渡在它们之间切换,但浏览器似乎是动画所有这些额外的em,所以它造成了崩溃效应的延迟.

有没有办法(同样的精神 – 用css类名)没有这个副作用(我可以放一个较低的像素数,但显然有缺点,因为它可能会切断合法的文本 – 那是原因很大的价值,所以它不会切断合法的长文,只有可笑的长篇)

看到j​​sfiddle – http://jsfiddle.net/wCzHV/1/(点击文本容器)

解决方法

修复延迟解决方案：

给元素放置立方贝塞尔(0,1,1)转换函数.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0,1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

原文地址：https://www.jb51.cc/css/217377.html