Listen und Layout
Einfügen, Entfernen und Umsortieren bleiben nachvollziehbar: kurze, präzise Animationen mit den Motion-Tokens, unterbrechbar, ohne Eingaben zu blockieren. Bei reduzierter Bewegung wechseln alle Bausteine sofort.
AnimatedList
Einfügen klappt die Höhe auf und blendet ein, Entfernen klappt zu, Umsortieren gleitet per Layout-Animation. Nach dem Löschen wandert der Fokus auf den nächsten Eintrag.
- Visite Station 3B vorbereiten
- Medikamentenplan aktualisieren
- Übergabe an den Spätdienst
NumberFlow
Zahlen laufen von der aktuell dargestellten zum neuen Wert. Die Ziffern sind tabellarisch, damit die Breite nicht springt; bei reduzierter Bewegung erscheint der Zielwert sofort.
Offene Vorgänge
1.284
Mit eigenem Format
1.926 €
Collapse
Kleine Höhen-Utility für beliebige Inhalte, etwa Detailzeilen oder Filter. Der Auslöser bleibt beim Konsumenten; die Utility animiert nur den Bereich.
Die Höhe wächst mit den Motion-Tokens und lässt sich jederzeit unterbrechen. Im geschlossenen Zustand ist der Bereich inert, damit er nicht per Tastatur erreichbar ist.
AnimatedPresence
Der Wrapper lädt die Motion-Features und reicht sie an AnimatePresence weiter. AnimatedList baut darauf auf; eigene Stapel wie Toasts oder Hinweise können ihn ebenfalls nutzen.
AnimatedPresence ist die gemeinsame Basis für Ein- und Austritte. Die eigentliche Animation definiert das Kind über seine m.*-Props.