vue与animate.css 结合使用在可视区域内动态展示的自定义指令

1、vue自定义指令

Vue.directive('class', {
  inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const { top } = el.getBoundingClientRect()
      const h = document.documentElement.clientHeight || document.body.clientHeight
      if (top < h) {
        el.className = binding.value
        if (binding.addClass) {
          window.removeEventListener('scroll', binding.addClass)
        }
      }
    }

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

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

2、使用方式

<div v-class="'animated fadeInUp'"></div>