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

最新推荐文章于 2024-08-20 08:39:53 发布

行云流水626

最新推荐文章于 2024-08-20 08:39:53 发布

阅读量870

点赞数

本文链接：https://blog.csdn.net/Lsir1998/article/details/132322965

版权

本文介绍了如何在Nuxt.js项目中安装和使用scrollreveal.js库，包括在plugins文件夹中设置、配置nuxt.config.js、并在页面组件的mounted钩子中应用动画效果，同时提及了SSR和移动设备兼容性。

摘要由CSDN通过智能技术生成

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');
      }
    })
  },