在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'); //停止滑動時，刪除向右淡出
    
                }
            }
        }