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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/217377.html

猜你在找的CSS相关文章