ScrollTrigger簡單說明

1、整體的自我理解

 　　　　const trigger = new ScrollTrigger.default({
            trigger: {
                once: false,    // 切換是否只是一次性
                offset: {
                    // 元素的偏移量要加上視圖的偏移量才算整體偏移量
                    // 例如:現在的視圖高度是667,元素out的高度是228(還沒顯示用out元素高度,已經顯示用in元素的高度),所以現在的偏移量是228*0.2+667*02
                    element: {
                        x: 0,
                        y: (trigger: any, rect: any, direction: any) => {
                            // rect (整體scrollDOM容器的所有信息)
                            // trigger (內部已經添加的動畫)
                            // direction (方向，top,bottom等)
                            // 元素距離視圖層多少的偏移量就顯示元素
                            return 0.2
                        }
                    },
                    viewport: {
                        x: 0,
                        y: (trigger: any, frame: any, direction: any) => {
                            // trigger (內部已經添加的動畫)
                            // frame (視圖高寬)
                            // direction (方向，top,bottom等)
                            return trigger.visible ? 0 : 0.2
                        }
                    }
                },
                toggle: {
                    // 元素切換的class,可以數組顯示多個元素,也可以只是字符串
                    class: {
                    },
                    // 回調函數
                    callback: {
                        // 元素可見狀態變化的回調方法
                        visible: (trigger: any) => {

                        },
                        // 進入元素的回調方法
                        in: (trigger: any) => {
                            return new Promise((resolve, reject) => {
                                console.log('in')
                                console.log(trigger)
                                setTimeout(resolve, 10)
                            })
                        },
                        // 移出元素的回調方法
                        out: (trigger: any) => {
                            return new Promise((resolve, reject) => {
                                setTimeout(resolve, 10)
                            })
                        }
                    }
                },
            },
            scroll: {
                // 滾動停止后,動畫繼續執行的毫秒數
                sustain: 200,
                // 滾動條的主體
                element: document.getElementById('scroll'),
                // 滾動中的回調函數
                callback: (e: any) => { console.log(e) },
                // 開始滾動的回調函數
                start: () => { },
                // 停止滾動的回調函數
                stop: () => { },
                // 滾動方向變化的回調函數
                directionChange: () => { }
            }
        })
        trigger.add('#an', {
            toggle: {
                class: {
                    in: ['animateIn'],
                    out: ['animateOut']
                }
            }
        })

2、html

<div className={style.scrollView} id="scroll">
    <div id="an"></div>
</div>