Vue自定义指令-渐入指令

原创

就叫7620521吧

发布于 2023-11-11 22:11:50

1540

发布于 2023-11-11 22:11:50

简言

Vue.js是一个轻量级的JavaScript框架，广泛用于构建用户界面。它提供了一套丰富的指令，帮助开发者快速构建交互式的Web应用程序。本文将介绍个人使用的滑动指令，并解释它们的用法和功能。大家可以根据具体的需求，并结合其他Vue特性和功能来实现更复杂的交互效果。某音的教学视频代码修改版

Vue指令的优点

简洁明了：Vue指令以v-开头，后跟指令名称，如v-bind、v-on等，语法简洁，易于理解和使用。
方便快捷：Vue指令可以快速创建和管理DOM元素，并且可以方便地绑定事件处理函数，大大减少了手动编写HTML和JavaScript代码的工作量。
响应式：Vue指令具有响应性，当数据发生变化时，指令会自动更新相关的DOM元素，无需手动更新页面。
可组合性：Vue指令可以组合使用，实现更复杂的功能。例如，可以使用v-bind指令绑定一个CSS样式对象，实现动态的样式修改。
自定义性：Vue指令可以自定义指令选项，通过定义指令的参数、更新、钩子等函数，实现自定义指令功能，满足项目对Vue指令的特殊需求。

代码解析三步走

看注释
看注释
看注释

const distance = 100;
const duration = 800;
// 创建一个 WeakMap 实例
const animationMap = new WeakMap();

// 判断元素是否在视口之下
function isBelowViewport(el) {
  const rect = el.getBoundingClientRect();
  return rect.top > window.innerHeight;
}

// 创建一个观察者实例
const ob = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    // 判断元素是否在视口之下
    if (entry.isIntersecting) {
      // 获取元素对应的动画实例并播放
      const animation = animationMap.get(entry.target);
      animation.play();
      ob.unobserve(entry.target);
    }
  }
});

export default {
  // 1. 通过指令钩子函数的参数 el 获取到 DOM 元素
  mounted(el) {
    // 2. 判断元素是否在视口之下，如果不是则不执行动画

    if (!isBelowViewport(el)) {
      // 直接执行动画
      el.animate(
        [
          {
            transform: `translateY(${distance}px)`,
            opacity: 0,
          },
          {
            transform: `translateY(0)`,
            opacity: 1,
          },
        ],
        {
          duration: duration,
          easing: "ease",
        }
      );

      return;
    }
    // 3. 创建动画实例并暂停
    var animation = el.animate(
      [
        {
          transform: `translateY(${distance}px)`,
          opacity: 0,
        },
        {
          transform: `translateY(0)`,
          opacity: 1,
        },
      ],
      {
        duration: duration,
        easing: "ease",
      }
    );

    // 4. 将动画实例存储到 WeakMap 中
    animation.pause();
    // 5. 将元素和动画实例关联起来
    animationMap.set(el, animation);

    // 6. 元素进入视口时播放动画
    ob.observe(el);
  },
  // 7. 元素移除时取消监听
  unmounted(el) {
    ob.unobserve(el);
  },
};