Orqestria Download
← Zurück zu Website-Bauer

Skill · Version 1.0.0

Animation ins Framework integrieren

Koordiniert Animationen mit Komponentenlebenszyklen, damit Darstellung, Abbruch und Navigation nicht um dieselben Eigenschaften konkurrieren.

framework-animation-integration

Teammitglieder mit diesem Skill

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze dies bei flackernden Übergängen oder Animationen nach dem Verschwinden einer Komponente.

Wobei hilft er dir?

  • Legt einen Verantwortlichen pro animierter DOM-Eigenschaft fest.
  • Koordiniert Übergangsende und Entfernung mit begrenztem Ersatzmechanismus.
  • Verwendet stabile Listenschlüssel und serverrenderingverträgliche Initialisierung.

Das könntest du fragen

Behebe ein zu früh verschwindendes Panel samt nach Navigation weiterlaufendem Timer. Schließe, öffne und verlasse die Ansicht während der Ausgangsanimation. Das Panel endet im angeforderten Zustand ohne verwaiste Timer oder verborgene Fokusziele.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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.

Enthaltene Dateien 1

  • SKILL.md