animate用法 js原生_如何更好的用原生 js 实现 jquery 的 animate

先说我现在的方法吧

背景：项目是 react 环境，里面有个滚动数据的功能，没有引入 jquery，个人感觉单独为了一个animate多引一个 jquery 不划算。

需求：展示获取到的 N 条数据，首屏展示 x 条，每过 t 秒滚动到下一屏。

实现：主要通过两个定时器，animate控制滚动间隔。Interval控制从滚动开始到滚动结束时长，代码如下。

目标：实现类似 jqueryanimate的平滑效果，目前在内层的定时器设置 0.001 秒移动步长±1 像素，在小区域内还行，但是半屏或者全屏的滚动就显得速度慢了，修改增加步长又不平滑，有很明显的段落感。而 jqueryanimate中就很流畅，所有动画都在 time 内完成。所以想请教下有没有更好的办法实现，或者有什么轻便的 animate 包。

代码：

……

//底部回滚到顶部

scroll = () => {

let dom = document.getElementById('scroll'),

//获取精确值

full = +window.getComputedStyle(dom).height.slice(0, -2),

view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),

//储存预设 top

top = 0,

//滚动值

scrollTop = 0,

//是否到底部

toTop = false;

function animate(){

top = toTop ? 0 : top - view

let Interval = setInterval(function(){

scrollTop = toTop ? scrollTop + 10 : scrollTop - 1

dom.style.marginTop = scrollTop + 'px'

if(toTop && scrollTop >= top){

toTop = false

dom.style.marginTop = top + 'px'

clearInterval(Interval)

}

if(!toTop && scrollTop <= top){

if(scrollTop - view <= -full) {

toTop = true

}

dom.style.marginTop = top + 'px'

clearInterval(Interval)

}

}, 1);

}

setInterval(animate, 4000)

}

//首尾循环

// scroll = () => {

// let dom = document.getElementById('scroll'),

// //获取精确值

// full = +window.getComputedStyle(dom).height.slice(0, -2),

// view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),

// li = +window.getComputedStyle(dom.firstChild).height.slice(0, -2),

// //滚动值

// scrollTop = 0,

// //储存 node

// liArr = []

// function animate(){

// //清空

// liArr = []

// //获取一屏的 node

// for (let i = 0; i < Math.ceil(view / li); i++){

// liArr.push(dom.childNodes[i])

// }

// //滚动事件

// let Interval = setInterval(function(){

// scrollTop -= 1

// dom.style.marginTop = scrollTop + 'px'

// //滚动到第二屏

// if(scrollTop <= -view){

// clearInterval(Interval)

// //重置

// scrollTop = 0

// //移动 node

// liArr.map(item => {

// dom.removeChild(item)

// dom.appendChild(item)

// })

// //复位

// dom.style.marginTop = '0px'

// }

// }, 1);

// }

// setInterval(animate, 4000)

// }

……

题外：顺便也可以指导下以上有哪些格式或者代码可以优化的