vue平滑上升指令

// directives/a.ts
let a = 50;
let b = 30;
let map = new WeakMap();
// 监听容器可视化
let ob = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const animation = map.get(entry.target);
      if (animation) {
        animation.play();
        ob.unobserve(entry.target)
      };
    }
  }
})

let isBelowViewport = (el:Element) =>{
  const rect = el.getBoundingClientRect();
  return rect.top - a > window.innerHeight;
}

export default {
  mounted(el: Element) {
    if (!isBelowViewport) return;
    const animation = el.animate([
      {
        transform: `translateY(${a}px)`,
        opacity: 0.5,
      },
      {
        transform: `translateY(${a}px)`,
        opacity: 1,
      }
    ], {
      duration: b,
      easing: "ease-in-out",
      fill: "backwards",
    });
    map.set(el, animation)
    animation.pause();
    ob.observe(el)
  },
  unmounted(el: Element) {
    ob.unobserve(el)
  },
}

使用方法 2024/5/11

import FadeIn form "/directives/a.ts"
const app = createApp({})
app.directive('FadeIn' , FadeIn)