Question

我知道这里有几次被问过，但是大多数答案都没有解决，因为人们可以一直附加信息并且盒子一开始就可以看到（我不知道新的高度我想动画（因为它的文字即时添加））

假设我有一个div，我会在其中附加文字，我将如何设置动画

<div id="mybox">
Text
</div>

Javascript代码（使用JQuery库）

function appendAndAnimate(text)
    $('#mybox').append(text +"<br/>")
end

我想打电话几次，但不要把它拉到新的高度，而是慢慢扩展到它。（该框不是隐藏的开头或任何东西）。我试过-webkit-transition和transition无济于事。我也玩过前后捕捉高度并来回移动，但这里没有优雅，更多是一个肮脏的解决方案

因为它的文字我不想使用平面在div框中添加带动画的高度，因为人们可能在浏览器上设置了不同的字体缩放。

Answer 1

据我所知，你想在附加文字时制作mybox的动画。我可以看到它将新文本块添加到mybox并以slideDown动画显示为例。然后它会是这样的：

$("button").click(function() {
    var el = $("<div />").css("display", "none").text("New Text")
    $("#mybox").append(el);
    el.slideDown(1000);
});

DEMO： http://jsfiddle.net/YRuqP/

更新。事实上我有更好的解决方案。如果您不想添加文本块。您可以使用其他变体。这里我们需要在mybox中添加一个额外的块，因此标记将如下所示：

<div id="mybox">
    <div>
        Text
    </div>
</div>

并设置为mybox样式overflow: hidden。

然后我们可以更新代码，以便在插入任何文本时获得漂亮的滑动动画。

var block = $("#mybox");
var child = block.children();
block.css("height", block.height());

$("button").click(function() {
    child.append(text);
    block.animate({
        height: child.height()
    });
});

DEMO： http://jsfiddle.net/YRuqP/1/

div用动画附加文本

1 个答案: