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模板中：

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

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

HTML:

　

　　

      

        
连接230万家庭
        
您的设备接入零壹平台后，可直接上线零壹各大渠道和商城
      
      

        

          

          

            
海外渠道
            
零壹正在大力发展海外渠道，产品套装即将登陆亚马逊、Shopee等海外电商平台，同时布设大量线下经销商，远销美国、欧洲、东南亚等地。
          
          

            
国内渠道
            
零壹小区物业系统已实际部署超7000个小区，线上商城覆盖超230万个家庭，线下体验店遍布各大城市。超300个城市和行业合伙人负责大型项目落地，统一从零壹渠道采购设备。
          
        
      
    
　　

      

        
接入，最快6小时完成
        
我们相信，效率就是生命，为您准备了多种上云途径，零壹专家实时进行技术支援
      
      

        

        

        

      
      
按照快速引导 修改MCU固件代码适配即可完成接入
    
...

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，原生添加类名的方式！
转自https://www.cnblogs.com/mmzuo-798/p/10882408.html