JS动画的实现过程
实现JS动画有2种方式,第1种是通过JS控制CSS属性变化实现动画;第2种是通过JS控制类的添加或删除来实现动画(animation.css库)。
- 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>
- 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动画