JS动画的实现过程

JS动画的实现过程

实现JS动画有2种方式，第1种是通过JS控制CSS属性变化实现动画；第2种是通过JS控制类的添加或删除来实现动画（animation.css库）。

1. JS控制CSS属性变化

div{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        }
<input type="button" value="开始" id="inp1" />
<div id="div1"></div>
<script>
    var oDiv = document.getElementById('div1');
    var aInp = document.getElementById('inp1');
    
    aInp.onclick = function(){
        clearInterval(timer);
        var timer = setInterval(function(){
            var speed = 10;
            if(oDiv.offsetLeft>300){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';
            }
        },30)
    }
</script>

2. JS控制类的添加或删除

div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 0px;
        }
.move {
        animation: move 5s infinite;
        }
@keyframes move {
        from {
            left: 0px;
            }
        to {
            left: 200px;
            }
        }
<input type="button" value="开始" class="inp1" />
<div class="div1"></div>
<script>
    var oDiv = document.getElementsByClassName('div1')[0];
    var aInp = document.getElementsByClassName('inp1')[0];

    aInp.onclick = function () {
//oDiv.className = 'move';
//classList是元素class属性组成的伪数组
        oDiv.classList.add('move')
    }
</script>

问题：JS动画的实现过程、DOM动画的实现、使用JS实现一个持续的动画效果
知识点：DOM操作、JS动画