Vue自定义指令-渐入指令

简言

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

Vue指令的优点

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

  }
,
}
    ;
    

效果展示

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！