指令

// smoothUpward.ts


const DURATION = 500;
const animationMap = new WeakMap();
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const animation = animationMap.get(entry.target);
      animation.play();
      observer.unobserve(entry.target);
    }
  }
});

export default {
  mounted: (el, binding) => {
    const animation = el.animate(
      [
        {
          transform: 'translateY(100px)',
          opacity: 1,
        },
        {
          transform: 'translateY(0)',
          opacity: 1,
        },
      ],
      {
        duration: DURATION,
        easing: 'ease',
      }
    );
    animation.pause();
    animationMap.set(el, animation);
    observer.observe(el);
  },
  unmounted(el) {
    observer.unobserve(el);
  },
};
/** 
<script setup lang="ts">
  import smoothUpward from './zl';
  const vSmoothUpward = smoothUpward;
</script>
<div v-smooth-upward v-for="v in 30">1</div>
*/