webkit-过渡高度为基于内容动态变化高度的div？ [英] webkit-transition height for a div with a dynamic changing height based on content?

问题描述

请参阅以下jsFiddle

http：/ /jsfiddle.net/SgyEW/10/

您可以点击显示不同长度内容的各种按钮，这会导致框增长/缩小。 p>

我希望高度变化是动画的，所以它不是那么跳跃，我尝试这样添加：

  -webkit-transition：all 1s linear; 
  

但这在此用例中没有效果。

感谢

解决方案

div>

我恐怕没有办法用CSS3过渡动画的高度没有Javascript帮助，检查：

css transition height：0;至height：auto;

你可以使用CSS3从height：0转换到内容的可变高度吗？

此外，您的代码从display：none转换为display：block，这在任何情况下都不会对height造成影响。而不是显示无使用height：0 with overflow：hidden;

please see the following jsFiddle

http://jsfiddle.net/SgyEW/10/

You can click the various buttons which shows different length content which causes the box to grow/shrink.

I want the height change to be animated so it is not so jumpy, I tried this by adding:

-webkit-transition: all 1s linear;

But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?

Thanks

解决方案

I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:

css transition height: 0; to height: auto;

Can you use CSS3 to transition from height:0 to the variable height of content?

Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;

这篇关于webkit-过渡高度为基于内容动态变化高度的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！