Orqestria Letöltés
← Pixel adatlapja
AgentPixel

Skill · 1.0.0 verzió

Animáció integrálása keretrendszerbe

Összehangolja az animációt a komponens életciklusával, hogy megjelenítés és navigáció ne versengjen ugyanazért a tulajdonságért.

framework-animation-integration

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha kilépési animáció villog vagy eltűnt komponens után fut.

Miben segít neked?

  • Egyetlen gazdához rendeli az animált DOM-tulajdonságot.
  • Időkorlátos tartalékkal hangolja össze az animáció végét és eltávolítást.
  • Stabil listakulcsot és szerveroldali megjelenítéssel összeférő indulást használ.

Például ezt kérheted

Javítsd az animáció előtt eltűnő panelt és navigáció után tovább futó időzítőjét. Kilépő animáció közben zárd, nyisd újra, majd navigálj el. A kért állapot maradjon, elárvult időzítő és rejtett fókuszcél nélkül.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Framework Animation Integration

Declarative UI frameworks (React, Vue, Angular) own the virtual/template DOM and unmount elements immediately when state flips to false. Imperative animation engines (WAAPI, GSAP, Canvas/Three.js) mutate real DOM nodes over time. Prevent the framework and the animation engine from fighting over the same properties.

Single Owner Rule for DOM Properties

  • Never bind a reactive framework style prop and an imperative animation to the same CSS property on the same element: If a component re-renders mid-animation with :style="{ transform: ... }" or style={{ opacity }}, the framework overwrites the animation engine's interpolated frame value.
  • Either let the framework's native transition primitive drive the state, or give the imperative animation a dedicated wrapper <div ref="animEl"> whose transform/opacity is untouched by reactive template bindings.

Framework-Specific Lifecycle & Exit Patterns

Framework Idiomatic Entry / Exit & Layout Primitives Imperative Timeline / Canvas Integration
React Motion (<AnimatePresence> + <motion.div layout exit={{ ... }}> + useReducedMotion()) or CSS @starting-style Scope with useGSAP(() => { ... }, { scope: containerRef, dependencies: [...] }) or useLayoutEffect returning () => ctx.revert(). Never query document.querySelector outside containerRef.
Vue 3 Built-in <Transition name="..." mode="out-in"> and <TransitionGroup> (includes built-in FLIP via .v-move transition class!), plus JavaScript hooks (@enter, @leave(el, done)) Create gsap.context(..., containerRef.value) or WAAPI handles in onMounted(), call done() in @leave hooks only after exit animation finishes, and always call ctx?.revert() in onUnmounted().
Angular @angular/animations (animate.enter / animate.leave, route transition triggers) or CSS transitions bound to host state signals Run continuous requestAnimationFrame, WAAPI, or GSAP loops via NgZone.runOutsideAngular(() => ...) so 60fps ticks never trigger change detection across the component tree; clean up via DestroyRef.onDestroy(...).

Handling Unmount & Route Transitions Safely

  1. Wait for exit completion before DOM removal—with a fallback timeout:
    • When using JS-driven exit hooks (Vue @leave(el, done) or custom exit promises), always ensure done() is called even if the animation is cancelled or prefers-reduced-motion skips it; otherwise the detached DOM node remains stuck in the document forever.
  2. Stable keys in animated lists:
    • <TransitionGroup> (Vue), <AnimatePresence> (React), and @for (...; track item.id) (Angular) rely on stable, unique item keys to calculate FLIP deltas and exit targets. Never use array index (index) as the key of an animated list.
  3. SSR & Hydration safety:
    • Guard browser-only globals (window, document, matchMedia, ResizeObserver, IntersectionObserver) behind mount hooks (onMounted, useEffect, afterNextRender) so server-side rendering and hydration complete without mismatches.

Csomagban lévő fájlok 1

  • SKILL.md