原生JS实现动画过渡效果原理
一般情况实现动画效果可以采用CSS3里的transition属性实现动画过渡。但如果有需求只能采用原生JS的情况下可以采用JS里的定时器功能。当然还有很多可以实现动画效果的方法。因为本人初步接触前端，实力不足这里只讲一下定时器的使用。
以固定的时间（极短）每次将CSS样式修改一点，达到视觉上的动画效果，使运动看起来不是特别生硬。
定时器使用
var timer = null;
timer = setInterval(function() {
pic.style.width = pic.offsetWidth + speed + "px";
}
}, time)
这里的pic可以是任意元素，speed则是单位时间pic宽度的变换量（速度），time是执行一次的时间。当time足够小时pic就会使宽度的变化以动画形式展现。
但是这种情况下pic的宽度会一直以speed的速度执行下去。我们需要加一个条件，当满足此条件时结束定时器。
var timer = null；
clearInterval(timer);
timer = setInterval(function() {
if (pic.style.width >= 150 + "px") {
clearInterval(timer);
} else {
pic.style.width = pic1.offsetWidth + speed + "px";
}
}, time)
此时pic.style.width >= 150 + "px"就是定时器停止的条件。当图片宽度大于150px时，结束定时器。
注意
- 执行语句和清除定时器的判断语句必须用if else语句连接。
- 判断语句最好用 >= 而不是 == 因为在定时器执行时不一定能准确达到期望值。此时加上 >= 可以时定时器及时结束。
结语
以上就是我对原生JS里定时器的浅层认识，如有错误欢迎提出、讨论。