JavaScript-230：动画原理

动画原理
1 获得盒子当前的位置
2 让盒子在当前位置加上1个移动距离
3 利用定时器不断重复这个操作
4 加一个结束定时器的条件
5 注意此元素需要添加定位 才能使用element.style.left

效果图

结构

    <div></div>

CSS

        div {
    
    
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

js

        var div = document.querySelector('div');

        var timer = setInterval(function ()
        {
    
    
            if (div.offsetLeft >= 400)
            {
    
    
                // 停止动画 本质是定时器
                clearTimeout(timer)
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30)