javascript - 动画根据 CSS 位置开始

Question

我想从 box 元素的默认位置开始 JavaScript 动画。我已经在 CSS 中指定了所需的起点并希望 javascript获取该位置并启动与之相关的动画。它从水平轴上的 0 像素开始，但不是相对意义上的。我希望它是相对的，0 应该意味着没有变化。

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
     var pos = 0; 
    //our box element
    var box = document.getElementById('box');
    var time = setInterval(move, 10);

    function move() {
        if(pos >= 150) {
            clearInterval(time);
        }
        else {
            pos += 1;
            box.style.left = pos+'px';
        }
    }
};

#container {
    width: 200px;
    height: 200px;
    background: green;
    position: relative;
}
#box {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50px;
    top: 50px;
}

<div id="container">
    <div id="box"> </div>
</div>

Answer 1

在这种情况下，您可以使用computeStyle:

 window.onload = function ()
    {
        var pos = 0;
        //our box element
        var box = document.getElementById('box');
        var time = setInterval(move, 10);

        function move()
        {
            var computedStyle = window.getComputedStyle(box);
            var pos = computedStyle.left;
            if (pos == '150px')
            {
                clearInterval(time);
            }
            else
            {
                var posValue = parseInt(pos.slice(0, pos.length - 2));
                posValue += 1;
                box.style.left = posValue + 'px';
            }
        }
    };

#container {
            width: 200px;
            height: 200px;
            background: green;
            position: relative;
        }

        #box {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }

<div id="container">
          <div id="box"> </div>  
        </div>