vue 元素进入可视范围添加动画（自定义指令）

man.js注册自定义指令

   //注册'v-class'  当元素出现在可视范围时添加类名出发样式
   Vue.directive('class', {
       inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const { top } = el.getBoundingClientRect()
      const h = document.documentElement.clientHeight || document.body.clientHeight
      if (top < h-200) {  //减去200刚好，否则刚露头就执行
        el.className = binding.value;
        if (binding.addClass) {
          window.removeEventListener('scroll', binding.addClass)

        }
      }
    }

    window.addEventListener('scroll', binding.addClass,true)

    binding.addClass()
  },
  unbind: function (el, binding) {
    if (binding.addClass) {
      window.removeEventListener('scroll', binding.addClass)
      console.log('取消事件绑定')
    }
  }
   }) 

使用

<span v-class="'a'"></span>   'a'是class类名