元素在滚动到可视区域内时加载动画

现在会有很多的需求是要某个元素在触底或者是滚动到屏幕可视区域内时再加载动画，而不是在页面渲染时直接加载所有动画

这里实在vue中使用的

自定义一个全局animate指令

这里我写到了main.js中

Vue.directive(animate, {
  inserted: function (el, binding) {
    // 聚焦元素
    binding.addClass = () => {
      const { top } = el.getBoundingClientRect()
      const h = document.documentElement.clientHeight || document.body.clientHeight
      if (top < h) {
        if(el.className.indexOf(binding.value) == -1 ){
          // 下面单引号中间是一个空格
          el.className = binding.value+ +el.className
        }
        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)
    }
  }
})

然后在页面中引用

<div v-animate="animate__animated animate__fadeInUp"></div>

或者是

<div v-animate="tempStyle"></div>

然后再style样式中写入自己定义的样式

.tempStyle {
    transform:scale(1.5);
    transition: 0.5s;
}

至此就可以解决啦