vAnimate.ts
506 bytes
| 1 | import type { Directive } from 'vue' |
|---|---|
| 2 | |
| 3 | const observer = new IntersectionObserver( |
| 4 | (entries) => { |
| 5 | entries.forEach((entry) => { |
| 6 | if (entry.isIntersecting) { |
| 7 | entry.target.classList.add('sa-visible') |
| 8 | observer.unobserve(entry.target) |
| 9 | } |
| 10 | }) |
| 11 | }, |
| 12 | { threshold: 0.1 }, |
| 13 | ) |
| 14 | |
| 15 | export const vAnimate: Directive = { |
| 16 | mounted(el: HTMLElement) { |
| 17 | el.classList.add('sa-animate-on-scroll') |
| 18 | observer.observe(el) |
| 19 | }, |
| 20 | unmounted(el: HTMLElement) { |
| 21 | observer.unobserve(el) |
| 22 | }, |
| 23 | } |
| 24 | |