javascript - 如何在css3中添加新文本时为宽度设置动画：自动div？

Question

我给了一个div这个代码

min-width: 200px;
width: auto;
transition: all 2s;
-webkit-transition: all 2s;

当我使用 jQuery append 向这个 div 添加更多文本时，为什么 div 没有动画到新的高度？

这在css3中可能吗？
编辑
这是一个绝对的 div，可能会有所不同

Answer 1

我认为问题在于，高度属性设置为“自动”并且它保持在“自动”状态。所以没有从一种状态到另一种状态的过渡。也许您必须设置一个绝对高度并为每个附加文本添加一些像素到 css 高度属性。

Answer 2

CSS3 过渡只能height为“长度、百分比或计算”值启用。如果您想在 CSS3 中执行此操作，则需要显式设置或计算高度。否则，您将需要使用 jQuery 对其进行动画处理，例如：

var old = $el.css('height');
$el.css('height', '');
$el.append('text');
var newH = $el.innerHeight();
$el.css('height', old);
if(old != newH)
    $el.animate({'height': newH}, 'fast');

Answer 3

var myStr='要附加的文本'; //参数可以是毫秒。

$(myStr).appendTo('#containerDiv').slideDown('slow'); // 现在可以工作了。

Answer 4

我不确定如何在 css3 中执行此操作，但我有一个在 jQuery 中完成的示例。

http://jsfiddle.net/T5aEw/1/

要在追加时让它滑动，您应该首先隐藏追加的项目，display:block然后调用.slideDown添加的最后一个元素。