使用scrollreveal.js结合scrollreveal.css实现页面进入视口即播放动画

最新推荐文章于 2024-08-27 15:59:21 发布

masju

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量98

点赞数 1

文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/masju/article/details/141340474

版权

页面中引入scrollreveal、scrollreveal相关库

loadData: function (xmr) {
                this.mxmr=xmr;
                let data=[
                    {el: '.logo', duration: 1, animated: 'animate__fadeInDown', reset: true},
                    {el: '.book', duration: 1.4, animated: 'animate__fadeIn', reset: true},
                    {el: '.title', duration: 1.5, animated: 'animate__bounceIn', reset: true},
                    {el: '.time', duration: 2.5, animated: 'animate__fadeInRight', reset: true},
                    {el: '.desc', duration: 1.5, animated: 'animate__fadeInUp', reset: true},
                    {el: '.th', duration: 1.5, animated: 'animate__bounceIn', reset: true},
                    {el: '.people', duration: 1.8, animated: 'animate__fadeInLeft', reset: true},
                    {el: '.activeArea', duration: 1.5, animated: 'animate__fadeInUp', reset: true},

                ];


                this.commonAnim(data);
            },

            commonAnim:function (animList) {
                console.log("animList",animList);
                if(!animList) return;
                animList.map((data)=>{
                    this.scrollReveal.reveal(data.el,{
                        reset:data.reset,
                        mobile: true,
                        afterReset: function (el) { //离开视图时重置，移除动画类名
                            el.classList.remove('animate__animated');
                            el.classList.remove(data.animated);
                            //console.log("离开视窗");
                        },
                        beforeReveal: function (el) { // 到达视图时触发，增加动画类名，添加执行动画时常
                            //console.log("进入视窗");
                            el.classList.add('animate__animated');
                            el.classList.add(data.animated);
                            if (data.duration)
                                el.style['animation-duration'] = data.duration + 's';
                            el.style['-webkit-animation-duration'] = data.duration + 's';
                        }
                    })
                })

            },