• nuxt中引入wow.js和animate.css随页面滚动出现动画

    发表于 2020-10-20 20:24浏览1047 • 评论0条 • 0人点赞 • 0人收藏

    10月

    20

    技术分享

    1、安装wowjs

         
    npm install wowjs --save
        
    

    2、animate.css 官网,下载css:https://animate.style/

    3、nuxt.config.js中引入animate.css。

        
    css:[
    '@/static/styles/animate.css'
    ],
        
    

    4、所需要用到动画在的vue文件中引入

         
    <script>
      if (process.browser) {
          var {WOW} = require('wowjs')
      }
      export default {
          data () {
              return {}
         },
          mounted() {
              if (process.browser) {
                  new WOW({
                      live: false,
                      offset: 0
                  }).init()
              }
          }
      }
    </script>
        
    

    5、在Html中使用,用 wow 对应的animatie.css的类名就可以了

        
    <div class="pos-abs my-logo wow fadeInDown animated"></div>
        
    

评论列表(有0条评论)

  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章