1
import { Directive } from 'vue'
2

3
const anime: Directive = {
4
  mounted: (el: HTMLElement, binding: { value: string }) => {
5
    if (binding.value.endsWith('Big')) {
6
      console.error(el, '避免使用Big类型的动画，这可能会引起未知错误')
7
      return
8
    }
9
    const name = binding.value ? binding.value : 'fadeIn'
10

11
    el.classList.add('animate__animated')
12
    // 创建IntersectionObserver实例
13
    const observer = new IntersectionObserver(
14
      (entries: IntersectionObserverEntry[]) => {
15
        const entry = entries[0]
16
        // 若该元素已经触发过动画则不再触发
17
        if (el.classList.contains('animate__done')) return
18
        // 监听元素是否与Observer相交
19
        if (entry.isIntersecting) {
20
          el.style.opacity = '100%'
21
          el.classList.add(`animate__${name}`)
22
          // 添加animate__done类 声明该元素已经触发过动画
23
          el.classList.add('animate__done')
24
        } else {
25
          el.style.opacity = '0%'
26
          el.classList.remove(`animate__${name}`)
27
        }
28
      },
29
      {
30
        // 元素与Observer相交90%时再触发事件
31
        threshold: [0.9]
32
      }
33
    )
34
    // 监听当前元素
35
    observer.observe(el)
36
  }
37
}
38

39
export default anime