javascript - 当其他内容大小发生变化时动画 div 位置

Question

我有一个内容 div，还有一个位于第一个 div 之下的 div。第一个 div 的内容动态变化，它的高度根据需要变化。通常，第二个 div 的位置会随着第一个 div 的高度变化而自动上下颠簸。如何为第二个 div 的移动设置动画，最好只使用 CSS 和 JS(不使用 jQuery)？

这是一个视觉效果:

最初，左边是我的两个 div。有时，div1 会扩展高度以适应其内容，而 div2 会向下推。如何为 div2 的运动设置动画？

Answer 1

• demo: http://jsbin.com/uwoxek

function init() {
    var header = document.getElementById('header');
    var header_height = header.offsetHeight;
    header.style.height = '10px';
    header.style.overflow = 'hidden';
    var i = 0;
    var animation = setInterval(function () {
        if (i <= header_height) {
            header.style.height = (10 + i) + 'px';
        } else {
            clearInterval(animation);
            header.style.overflow = 'block';
        }
        i++;
    }, 10); 
}

好的，也许需要一些注释？你必须移动的不是“第二个”div，而是“第一个”，通过移动会自动将第二个推到底部(或第一个的末尾)希望这有帮助