junto animate.css vue con un comando personalizado en la zona visible de la pantalla dinámica

1, la instrucción personalizada vue

Vue.directive ( 'clase' , { 
  insertada: la función (el, la unión) {
     // 聚焦元素 
    binding.addClass = () => { 
      const {arriba} = el.getBoundingClientRect () 
      const h = document.documentElement.clientHeight | | document.body.clientHeight
       si (top < h) { 
        el.className = binding.value
         si (binding.addClass) { 
          window.removeEventListener ( 'scroll' , binding.addClass) 
        } 
      } 
    } 

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

    binding.addClass () 
  }, 
  unbind: la función (el, la unión) {
     si (binding.addClass) { 
      window.removeEventListener ( 'scroll' , binding.addClass) 
      console.log ( '取消事件绑定' ) 
    } 
  } 
})

2, el uso

<Div de clase v = " 'animada fadeInUp'"> </ div>