javascript - コンテンツがjavascriptでサイズ変更されたときの自動高さ変更のアニメーション

Question

コンテンツの長さを変更するものを追加するときに、コンテナの自動高さ変更を制御したいと思います。現在、コンテンツにinnerHTMLの変更を適用すると、それに応じて高さが変更されます。その高さの変化にトランジションを適用したいと思います。どうやってやるの？（jQueryも使用できます）

Answer 1

コンテンツを変更する前に高さを記録し、コンテンツを変更して高さを記録し、高さを前の高さに設定し、後者の高さにアニメートします。アニメーションが完了したら、高さを再び自動に設定します。heightと を使用してこれを行うことができますanimate。

JSFiddleで試してみてください。

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');
    });
}

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>

Answer 2

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

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

また：

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

コンテナ内の div に追加する場合:

$('#container').children().first().append(somethingNew);