使用javascript调整内容大小时自动更改高度的动画

Question

当我添加更改内容长度的内容时，我想控制容器的自动高度更改。现在，如果我对内容应用innerHTML更改，则高度也会相应更改。我想对高度变化应用过渡。我怎样才能做到这一点？ （我也可以使用jQuery）

Answer 1

更改内容之前记录高度，更改内容，之后记录高度，将高度设置为前一个高度，然后为后一个高度设置动画。动画完成后，再次将高度设置为自动。您可以使用height和height进行此操作。

[animate on JSFiddle。

animate

Try it

var texts = [
    "This is just some sample text that's being used to demonstrate animating the height when content changes.",
    "Shorter."
];

var div = $('div').click(changeContent);

function changeContent() {
    var oldHeight = div.height();
    texts.push(div.text());
    div.text(texts.shift());
    var newHeight = div.height();
    div.height(oldHeight);
    div.animate({height: newHeight}, 'fast', function() {
        div.height('auto');
    });
}

Answer 2

div {
    width: 150px;
    background: lightgray;
    overflow-y: hidden;
}

或：

<div>This is some example content.</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

以及在容器内的div中添加append时：

<div id="containter" style="overflow:hidden">
<div>
 Content.....
</div>
</div>

//add something...
$('#container').animate({height:$('#container').content().outerHeight()});

Answer 3

基于 $('#container').animate({height:$('#container').children().first().outerHeight()}); 。

我在更改高度时禁用了按钮，并添加了褪色效果。此解决方案对于更新产品过滤器等很有用。

还检查$('#container').children().first().append(somethingNew); 属性。如果它是icktoofay's answer，那么当新内容具有相同的高度时，我会用box-sizing而不是box-sizing来获得newHeight，以防止高度波动。您可以检查这种情况，例如通过将.outerHeigth()变量设置为值.outerHeigth()。原因是

.height()将始终返回内容高度，而不管CSS box-sizing属性的值如何。

.height()

random

5

.height()