initializeViewTransitions

initializeViewTransitions.ts

// View Transitions API は TypeScript の型定義に含まれていないため自身で定義する
declare global {
  interface ViewTransition {
    finished: Promise<void>
    ready: Promise<void>
    updateCallbackDone: Promise<void>
  }

  interface Document {
    startViewTransition(updateCallback: () => Promise<void> | void): ViewTransition
  }

  interface CSSStyleDeclaration {
    viewTransitionName?: string
  }
}

const handleIntersection = (viewTransitionName: string) => (entries: IntersectionObserverEntry[]) => {
  entries.forEach((entry) => {
    const target = entry.target as HTMLElement
    const transitionName = entry.isIntersecting ? viewTransitionName : 'none'
    target.style.setProperty('view-transition-name', transitionName)
  })
}

const observeElement = (element: HTMLElement): void => {
  const { viewTransitionName } = getComputedStyle(element)
  if (!viewTransitionName || viewTransitionName === 'none') return

  const observer = new IntersectionObserver(handleIntersection(viewTransitionName))
  observer.observe(element)
}

const initializeViewTransitions = (): void => {
  if (!document.startViewTransition) return

  const transitionElements = document.querySelectorAll<HTMLElement>('[data-view-transition-element]')
  if (transitionElements.length === 0) return

  transitionElements.forEach(observeElement)
}

export default initializeViewTransitions