vue元素进入可视区域触发动画

思路就是通过 vue.directive 来创建一个自定义指令 在指令中监听元素是否进入可视区域，进入可视区域后给元素添加相应的css类 。

//在main.js添加下面代码

//监听元素是否进入视图
Vue.directive('appear-animation', {
  bind(el, binding) {
    const options = binding.value || {};

    let hasEntered = false; // 用于追踪元素是否已经进入视图

    // sjhaihbd-in
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !hasEntered) {
            // 元素进入视图，添加CSS类触发动画
            el.classList.add(options.appearClass || 'slide-in');
            hasEntered = true; // 更新状态
          
        } else if (!entry.isIntersecting && hasEntered) {
          // 元素离开视图，移除CSS类
          el.classList.remove(options.appearClass || 'slide-in');
          hasEntered = false; // 更新状态
        }
      });
    }, options.intersectionOptions || {});

    observer.observe(el);
  },
});