原生js实现动画过渡效果

原生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 = pic.offsetWidth + speed + "px";
        }
    }, time)

此时pic.style.width >= 150 + "px"就是定时器停止的条件。当图片宽度大于150px时，结束定时器。

注意

• 执行语句和清除定时器的判断语句必须用if else语句连接。
• 判断语句最好用 >= 而不是 == 因为在定时器执行时不一定能准确达到期望值。此时加上 >= 可以时定时器及时结束。

结语

以上就是我对原生JS里定时器的浅层认识，如有错误欢迎提出、讨论。