Austrittsanimationen 1.2.0

Elemente mit Fade- und Scale-Austrittseffekten ausblenden. English: Exit

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist getrennt und dort beta / foundation, wo es markiert ist.

Wann verwenden

Austritts- und Dismiss-Animationen, bevor Nodes aus dem DOM entfernt werden.
Mit Component-Close-Events koordinieren, wenn Web Components genutzt werden.

Wann nicht

prefers-reduced-motion bei dekorativer Bewegung nicht ignorieren.
Keine Attention-Loops auf großen Inhaltsbereichen verwenden — CSS-Tokens und kurze Dauern bevorzugen.

Fade Out

<div class="velin-animate-fade-out">Fades to transparent</div>
<div class="velin-animate-fade-out-up">Fades out moving up</div>
<div class="velin-animate-fade-out-down">Fades out moving down</div>

Scale Out

<div class="velin-animate-scale-out">Shrinks to nothing</div>

Fill Mode

Austrittsanimationen benötigen typischerweise .velin-fill-forwards, damit das Element nach der Animation verborgen bleibt:

<div class="velin-animate-fade-out velin-fill-forwards">
  Gone after animation
</div>

Attribute & Runtime

Für Varianten, die beim Scrollen ausgelöst werden, velin-reveal / initMotion() bevorzugen — siehe Motion & attributes. Die CSS-Klassen hier bleiben ohne JS gültig.