vue實現滾動條滾到相應高度觸發動畫的操作

一、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>

二、本人寫的一個滾動條滾動到相應位置然后執行動畫的例子：

思路：這里沒有直接添加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，原生添加類名的方式！