Skill · 1.0.0 verzió

Webes animációk megvalósítása

A feladathoz illő egyszerű animációs megoldást épít, kezelve a megszakítást, az elrendezés változását és az erőforrásokat.

web-animation-implementation

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha gördülékeny átmenetet vagy vezérelhető mozgást szeretnél, de a jelenlegi megoldás akadozik vagy rossz állapotban marad.

Miben segít neked?

A működés alapján választ CSS-t, böngészős animációs API-t vagy meglévő könyvtárat.
Hatékony mozgatással kerüli a folyamatos, költséges elrendezés-újraszámítást.
Figyelembe veszi a betűk és képek betöltését, az átméretezést és a végleges állapotot.

Például ezt kérheted

Animáld a kártyák oszlopok közötti áthelyezését. Megszakítás után is legyen helyes az elrendezés, és nézetméret- vagy betűváltozáskor számítsd újra a pozíciókat. Betűbetöltés és átméretezés közben kétszer mozgass kártyát. Végső oszlopa, kattintható területe és fókusza a mentett helyzethez igazodjon.

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

Web Animation Implementation

Choose the lightest tool that cleanly solves the interaction's state, interruption, and coordination requirements, and always adapt to the animation primitives already installed in the project.

Selecting the Right Animation Primitive

Requirement	Preferred Tool	Why
Simple 2-state UI feedback (hover, focus, open/closed class, accordion height via `grid-template-rows: 0fr -> 1fr`)	CSS Transitions	Zero JS bundle cost, automatic mid-flight reversal from current value, compositor-friendly
Self-contained cyclical or multi-step effect (pulse, shimmer, spinner, CSS `@starting-style` entry)	CSS `@keyframes`	Declarative, runs off main thread when animating `transform`/`opacity`
Programmatic control (`play`, `pause`, `reverse`, `finish` Promise, dynamic target coordinates, FLIP) without adding dependencies	Web Animations API (`element.animate`)	Native browser API, Promise-based lifecycle (`animation.finished`), `commitStyles()` support
DOM state / route morphology across container changes	View Transitions API (`document.startViewTransition`) with progressive fallback	Seamless shared-element morphing with minimal layout thrashing
Multi-element choreographed timelines, scroll-scrubbed scenes, complex SVG morph/draw	Project Timeline Library (e.g., GSAP / Motion)	Precise scrubbing, relative time labels, normalized cross-browser transforms

Compositor-Safe Properties & FLIP Technique

Stick to compositor properties (transform, opacity, filter, clip-path):
- Never animate top, left, width, height, margin, or padding frame-by-frame in continuous loops.
- For height/width reveals where overflow: hidden is acceptable, use CSS Grid (grid-template-rows: 0fr $\rightarrow$ 1fr on wrapper with min-height: 0 child) or the FLIP pattern:
  - First: Measure initial getBoundingClientRect().
  - Last: Apply the DOM/class change and measure final getBoundingClientRect().
  - Invert: Apply transform: translate(dx, dy) scale(dw, dh) so the element visually appears in its First position.
  - Play: Animate transform back to none (translate(0, 0) scale(1, 1)), correcting child scale distortions if needed.
WAAPI (element.animate) Pitfalls:
- Avoid fill: 'forwards' when possible because retained fill animations override subsequent CSS rules and consume memory until cancelled; instead, update the underlying inline style or class on completion (await anim.finished; anim.commitStyles(); anim.cancel();).
Font, Image & Resize Stability:
- Wait for document.fonts.ready and image dimensions (width/height attributes or decode()) before measuring text splits or scroll/layout coordinates.
- Recompute cached geometry inside a debounced ResizeObserver rather than binding unthrottled window.onresize handlers.

Csomagban lévő fájlok 1

SKILL.md