Question

我正在尝试设置divs高度的动画，同时设置底部属性。动画有效，但它不会保留在“父”div的底部。

以下是动画的代码：

function mini(elem) {
        var val = 200;
        var elm = document.getElementById(elem.id);

        function frame() {
            val--;

            elm.setAttribute("style", "height:" + val + "px;bottom:0px;");

            if (val == 80) {
                clearInterval(id);
            }
        }

        var id = setInterval(frame, 1);            
    }

您可以在此处查看整个HTML：http://test.lundbeckconsulting.no/ContentBox/default.html

Answer 1

您正在使用bottom:0px在元素上设置position:relative。这没什么。

您应该考虑使用jQuery .animate()。您可以执行相同的功能，而无需担心讨厌的计时器间隔等。您的整个代码可以简化为：

$('#container').animate({'height':0},200,'linear');

Answer 2

我相信你在错误的元素上调用mini()。它应该在container_sub上调用，而不是container。

Answer 3

内部给出的完整示例并没有给出清楚的理解，尽管它是父母，而且是孩子。

有两种简单的方法可以达到你想要的效果：

向孩子添加margin-top，使其向下移动与高度降低相同
父元素必须为position: relative，而孩子需要position: absolute才能让底部在此处工作

Sidenote＃1：通过使用style属性更改dom元素样式，使代码更具可读性。通过这样做，您不需要在每个动画帧上设置底部样式。

//From
elm.setAttribute("style", "height:" + val + "px;bottom:0px;");
// To
elm.style.height = val + 'px';
elm.style.bottom = '0px';

Sidenote＃2：阅读有关使用Window.requestAnimationFrame()在javascipt中制作动画的内容。 Sidenote＃3：尝试使用转换和转换的组合在css中进行动画，并使用javascript监听动画的结束。

尝试使用JavaScript动画divs高度

3 个答案: