标签：npm vue wowjs wow js animate save css

wowjs 依赖animate.css 需要单独安装
wowjs githup 地址  https://github.com/matthieua/WOW#readme
npm 地址 https://github.com/animate-css/animate.css
animate.css 地址  npm install animate.css --save

使用步骤

1.  npm install wowjs --save-dev
2.  npm install animate.css --save

vue 注册wowjs

main.js
     import 'animate.css/animate.min.css'
app.vue

import { WOW } from 'wowjs'

  watch: {
    $route(to, from) {
      this.$nextTick(() => {
        new WOW({ mobile: true, live: true, scrollContainer: '.layout-content' }).init()
      })
    }
  },


使用
        <div
          class="trait-item wow bounceInUp"
          data-wow-duration="1s"
          :data-wow-delay="index + 5 + 's'"
          v-for="(item, index) in traits"
          :key="index"
        >
          <img :src="item.img" alt="" />
        </div>


注意
1.scrollContainer  放实际滚动的容器   一般不用填此项
2. 引入wowjs 和初始化方式

元素 消失不见  概率是容器填错了  例如 移动端 底部为tabbar  浏览器实际没有滚动 wow是根据容器滚动判断才执行显示的   
有问题查官方文档才是最好的方法 链接上面有  

使用的包相应版本

    "wowjs": "^1.1.3"

    "animate.css": "^3.7.2"

标签：npm,vue,wowjs,wow,js,animate,save,css
来源： https://blog.csdn.net/weixin_42776027/article/details/114481784

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。