使用CSS转换动画max-height [英] Animating max-height with CSS transitions

问题描述

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

我给一个类 max-height：4em; overflow：hidden;

，另一个 max-height：255em; 也尝试了值 none ，这根本没有动画）

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

我使用CSS转换来切换，要动画所有这些额外的 em 的，所以它造成崩溃效果的延迟。

有没有办法（在同样的精神 - 与CSS类名），没有那种副作用（我可以放一个较低的像素数，但这显然有缺点，因为它可能会切断合法的文本 - 这是大价值的原因，所以它不会切断合法的长文本，只有可笑的长文本）

请参阅jsFiddle - http://jsfiddle.net/wCzHV/1/ （点击文本容器）

解决方案

如果有人读这个，我没有找到一个解决方案，将转换样式移至扩展类定义）

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

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

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

this to animate: 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.

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)

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

解决方案

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)

这篇关于使用CSS转换动画max-height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！