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

1、安装scrollreveal.js，官方文档地址：Installation — ScrollReveal

npm install scrollreveal --save

2、引入

        2.1、在plugins文件夹新建scrollreveal.js 名称自定义随便取

import ScrollReveal from 'scrollreveal';
export default (context, inject) => {
    inject('sr', option=>ScrollReveal())
}

        2.2在nuxt.config.js中引入

 plugins: [
    {src:'@/plugins/scrollreveal',ssr: false},
  ],

3、页面组件中使用；确保放在mounted中，需要dom渲染完成之后才能监听

 mounted(){
    this.$sr().reveal('.wy',{  //.wy是需要播放动画的元素类名
      reset: true,
      mobile: true, 
      beforeReveal:el=>{
        el.classList.add('animate__zoomIn'); //animate__zoomIn为animate.css的类名
      }
    })
    this.$sr().reveal('.wyGrid',{  
      reset: true,
      mobile: true, 
      beforeReveal:el=>{
        el.classList.add('animate__fadeInUp');
      }
    })
  },