在vue中实现页面滚动（停止滚动）的动画效果总结

1、运用到的技术：

• 监听滚动事件：window.addEventListener('scroll', function（handleScroll）);
• 动画库：animate.css

 2、总结：

• 滚动事件触发时，记录滚动条的垂直位置：document.documentElement.scrollTop || document.body.scrollTop
• 滚动停止触发思路：在滚动触发时，写一个新函数ScrollEnd（做延迟setTimeout），记录新的scrollTop值，然后比较这2个scrollTop值，如果相等的话，说明停止了滚动
• 注意：每次滚动的时候，需要先清除定时器，因为滚动的时候，一直再清定时器，不会执行新函数ScrollEnd，只有当停止滚动的时候才执行该函数。
• 动画：首先获取元素element = document.getElemenidtById('id')，然后添加元素动画效果element.classList.add('animated', 'fadeOutRight')，fadeOutRight：右淡出 删除元素动画效果：element.classList.remove('animated', 'fadeOutRight')
• 动画官方网址：https://daneden.github.io/animate.css/

3、接下来给出源码

    1、
      data() {
            return {
                scrollT: '',
                scrollStops: '',
                timer: ''
            }
       }

2、
        mounted() {
           
                //滚动条监听
            window.addEventListener('scroll', this.handleScroll);
        }

3、
     methods: {
            handleScroll() {
                clearTimeout(this.timer); //清除定時器
                this.timer = setTimeout(this.ScrollEnd, 500);
                this.scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                //滚动中的动画
                const element = document.getElementById('fixbox');
                element.classList.add('animated', 'fadeOutRight') //滑动时，右淡出
             
            },
            ScrollEnd() {
                this.stopscroll = document.documentElement.scrollTop || document.body.scrollTop; //停止后的scrolltop
                if (this.stopscroll == this.scrollT) {
                    const el = document.getElementById('fixbox'); 
                    el.classList.remove('fadeOutRight'); //停止滑动时，删除向右淡出
    
                }
            }
        }