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

改用rAF实现动画，视觉效果可以了。还有点bug，切换标签或者最小化浏览器后rAF还在走，通过visibilityState判断是否执行/取消动画好像也没效果。虽然是用作展示的大屏页面不存在切换标签/最小化的情况，但还是想优化一下。因为有字数限制，只能贴部分主要代码。有什么好方法解决可以提供一下思路，也可以指导一下代码

    ……

        let step = timestamp => {
                //储存起始时间
                if (!start) start = timestamp
                //每帧的滚动位置
                let progress = (timestamp - start) / 2;
                dom.style.transform = 'translateY(' + -progress + 'px)'
                //判断是否在前台显示，执行或暂停rAF并清空start
                if(this.state.tabVisible){
                    stepID = window.requestAnimationFrame(step)
                }else {
                    window.cancelAnimationFrame(stepID)
                    start = null
                }
                if (progress >= view) {
                    window.cancelAnimationFrame(stepID)
                    progress = 0
                    //初始化起始时间
                    start = null
                    dom.style.transform = 'translateY(' + -progress + 'px)'
                }
            }

        if(+window.getComputedStyle(dom).height.slice(0, -2) > view && this.state.tabVisible){
            interval = setInterval(() => {
                mstep = window.requestAnimationFrame(step)
            }, 4000)
        }else {
            clearInterval(interval)
            window.cancelAnimationFrame(mstep)
        }

    ……

上面提到的bug修复了，贴一下代码，字数限制删了注释。可以结合上面看一下

    scroll = () => {
        let dom = document.getElementById('scroll'),
            fragment = document.createDocumentFragment(),
            view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),
            li = +window.getComputedStyle(dom.firstElementChild).height.slice(0, -2),
            start = null, stepID = null, interval = null,
            step = timestamp => {
                let liArr = [], i = 0;
                while (i < Math.ceil(view / li)) {
                    liArr.push(dom.children[i])
                    i++
                }
                if (!start) start = timestamp
                let progress = (timestamp - start) / 2;
                dom.style.transform = 'translateY(' + -progress + 'px)'
                stepID = window.requestAnimationFrame(step)
                if (progress >= view) {
                    window.cancelAnimationFrame(stepID)
                    progress = 0
                    start = null
                    dom.style.transform = 'translateY(' + -progress + 'px)'
                    liArr.map(item => {
                        fragment.appendChild(item)
                        return item
                    })
                    dom.appendChild(fragment)
                }
            }
        if(+window.getComputedStyle(dom).height.slice(0, -2) > view){
            interval = setInterval(() => {
                window.requestAnimationFrame(step)
            }, 4000)
        }
        document.addEventListener("visibilitychange", function() {
            clearInterval(interval)
            if(!document.hidden) {
                interval = setInterval(() => {
                    window.requestAnimationFrame(step)
                }, 4000)
            }
        });
    }

接上 在修改的时候朋友提到可以用transition来做动画，后来就用transition试了一下，也一起贴上来吧。因为transition要分别写多个浏览器的监听，这里偷懒只按需求写了webkit，在其他浏览器可能会有问题。transition相比rAF应该更简单，不过因为没用过rAF写了一遍也有收获。至于计时用interval还是timeout还是看实际情况，这里感觉interval少调用一次会好一点。感谢一直指导的 @ChefIsAwesome

    scroll = () => {
        let dom = document.getElementById('scroll'),
            //虚拟dom
            fragment = document.createDocumentFragment(),
            //获取精确值
            view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),
            li = +window.getComputedStyle(dom.firstElementChild).height.slice(0, -2),
            interval = null,
            fun = () => {
                dom.style.transition = 'all 0.5s'
                dom.style.transform = 'translateY(' + -view + 'px)'
            }
        if(+window.getComputedStyle(dom).height.slice(0, -2) > view){
            interval = setInterval(fun, 4000)
        }
        dom.addEventListener('webkitTransitionEnd', function () {
            dom.style.transition = 'all 0s'
            let liArr = [], i = 0
            while (i < Math.ceil(view / li)) {
                liArr.push(dom.children[i])
                i++
            }
            liArr.map(item => {
                fragment.appendChild(item)
                return item
            })
            dom.appendChild(fragment)
            dom.style.transform = 'translateY(0px)'
        }, false);
        document.addEventListener("visibilitychange", function() {
            clearInterval(interval)
            if(!document.hidden) {
                interval = setInterval(fun, 4000)
            }
        });
    }