javascript - 隐藏元素时如何为 div 的背景设置动画？

Question

对于我正在制作的网站，我有一些动态加载的内容。我想要完成的是，当内容加载时，我希望 div 能够平滑地动画以扩展到新内容的大小，有点像 div 在 this Fiddle 中的作用。或者这个:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 51%, black 49%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

该代码使用 CSS 转换作为完成幻灯片的一种 hacky 方式。

transition: background-position 1s;

相反，我想使用 JavaScript(也许是 JQuery)来调整 div 本身的大小以适合我的内容。例如，如果旧内容比新内容长，div 会滑动变小。如果旧内容较小，则 div 会变大以适应新内容。

目前，div 只是跳得更小，因为里面的元素不再需要那么大的空间。有什么方法可以使此内容更改动画化吗？我曾尝试使用 CSS 过渡，但协调 div 和内容的大小太复杂了。

Answer 1

需要获取容器的原始高度和内容更新后的新高度

Demo

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