vue实现滚动条滚到相应高度触发动画的操做

1、vue项目引入animate.css

第一步：在命令行中执行：

npm install animate.css --save

第二步：引入及使用：

main.js中： import animated from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animated)

第三步：使用 demo

vue模板中： <div class="ty">
    <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，不然动画会无效 -->
    <div class="box animated bounceInDown"></div>
</div>

2、本人写的一个滚动条滚动到相应位置而后执行动画的例子：

思路：这里没有直接添加css类名，而是结合vue指令用显示和隐藏来控制的！附上代码以下：

HTML:

　　<!--重点关注代码中的 v-show ,就是添加animated的地方-->

　　<section ref="qudao" class="qudao">
      <div class="subtitle">
        <h2>链接230万家庭</h2>
        <p>您的设备接入零壹平台后，可直接上线零壹各大渠道和商城</p>
      </div>
      <div class="content">
        <div class="earth-wrap">
          <div v-show="qudaoShow" ref="earth" class="earth animated bounceInDown delay-1"></div>
          <div v-show="qudaoShow" class="left-con animated fadeInLeft delay-1">
            <h4>海外渠道</h4>
            <p class="dec">零壹正在大力发展海外渠道，产品套装即将登录亚马逊、Shopee等海外电商平台，同时布设大量线下经销商，远销美国、欧洲、东南亚等地。</p>
          </div>
          <div v-show="qudaoShow" class="right-con animated fadeInRight delay-1">
            <h4>国内渠道</h4>
            <p class="dec">零壹小区物业系统已实际部署超7000个小区，线上商城覆盖超230万个家庭，线下体验店遍及各大城市。超300个城市和行业合伙人负责大型项目落地，统一从零壹渠道采购设备。</p>
          </div>
        </div>
      </div>
    </section>
　　<section ref="time" class="time">
      <div class="subtitle">
        <h2>接入，最快6小时完成</h2>
        <p>咱们相信，效率就是生命，为您准备了多种上云途径，零壹专家实时进行技术支援</p>
      </div>
      <ul class="flexbox">
        <li v-show="timeShow" class="animated flipInY delay"><img src="@/assets/images/home/time1.png"></li>
        <li v-show="timeShow" class="animated flipInY delay-2"><img src="@/assets/images/home/time2.png"></li>
        <li v-show="timeShow" class="animated flipInY delay-4"><img src="@/assets/images/home/time3.png"></li>
      </ul>
      <p class="timeTxt">按照快速引导 修改MCU固件代码适配便可完成接入</p>
    </section> ...

 

JS:

export default { name: 'home', data() { close: true, qudaoShow: false, deviceShow: false, sceneShow: false, oemShow: false, productShow: false, timeShow: false, dixianShow: false, loading: false } }, 　mounted () { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll () { // 实现当滚动到指定位置，触发动画
      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
      // this.gdjz('earth', 'earth animated bounceInDown', 50)
      let _this = this let refArray = [ {ref: 'qudao', show: 'qudaoShow'}, {ref: 'device', show: 'deviceShow'}, {ref: 'scene', show: 'sceneShow'}, {ref: 'oem', show: 'oemShow'}, {ref: 'product', show: 'productShow'}, {ref: 'time', show: 'timeShow'}, {ref: 'dixian', show: 'dixianShow'} ] refArray.forEach((r,i) => { _this.gdjz(r.ref, 20, () => { _this[r.show] = true }) }) }, gdjz (div, offset, callback) { let dom = this.$refs[div] // 等同于document.querySelector('.earth') true
      if(dom){ var a,b,c,d; d = dom.offsetTop // 元素距离相对父级的高度，这里父级指的是body a = eval(d + offset) b = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度 c = document.documentElement.clientHeight || document.body.clientHeight // 获取浏览器可视区的高度 if( b + c > a ) { callback && callback() } } },
　　...

 备注：也能够使用添加类名的方法，能够参考 html5新增操做类名方式 classList，原生添加类名的方式！