Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Animation

Composable Reveal

Composable Reveal: Ein Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können.

Composable Reveal verwenden

Composable Reveal verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
slidebooleantrueKeine weitere Grenze in den Metadaten.
fadebooleantrueKeine weitere Grenze in den Metadaten.
zoombooleanfalseKeine weitere Grenze in den Metadaten.
defocusbooleanfalseKeine weitere Grenze in den Metadaten.
delaynumber0Von 0 bis 1000; Schrittweite 50
accentcolor#38BDF8Keine weitere Grenze in den Metadaten.
Für welche Frameworks ist Composable Reveal verfügbar?

Composable Reveal ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Composable Reveal?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Composable Reveal erkennbar?

Der React-Quellcode von Composable Reveal enthält: Die Quellcode-Analyse fand in index.tsx keine expliziten nativen Formular- oder Navigationselemente, ARIA-Attribute oder Tastaturbehandler. Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Composable Reveal reduzierte Bewegung?

Composable Reveal liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduced ? visible : hidden; reduced ? { duration: 0 } : { ...SPRING, delay: delay / 1000 }; reduced || revealed ? visible : hidden. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Directional Slide In von Fieldbook aus der Kategorie Animation.
1684Directional Slide InAnimationEine Enthüllung, die den Inhalt von einer der vier Seiten um einen festgelegten Abstand nach innen schiebt und es einer Feder ermöglicht, den ankommenden Inhalt aufzufangen.
Standbild der UI-Komponente Spring easing toggle von Fieldbook aus der Kategorie Animation.
1808Spring easing toggleAnimationEine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.
Standbild der UI-Komponente Archetype morph shape von Fieldbook aus der Kategorie Animation.
2917Archetype morph shapeAnimationEine Form verwandelt sich in einen Button, Schalter, Schieberegler, eine Karte und ein Kontrollkästchen, während Liveanzeigen ihre Breite, Höhe, ihren Eckenradius und ihre Bestandteile wiedergeben.
Standbild der UI-Komponente Orbiting Avatar Intro von Fieldbook aus der Kategorie Animation.
1724Orbiting Avatar IntroAnimationEin Stapel runder Porträts, der sich anhebt, zu einem Kreis auffächert und sich dann langsam um die Mitte dreht, während jedes Porträt aufrecht bleibt.
Standbild der UI-Komponente Tile reveal swap von Fieldbook aus der Kategorie Animation.
2252Tile reveal swapAnimationZwei Felder tauschen ihre Plätze Kachel für Kachel, wobei sich jede Kachel dreht und skaliert, während sie umgedreht wird, in einer Reihenfolge, die von der Mitte, den Rändern oder einer Spirale aus gesteuert wird.
Standbild der UI-Komponente Burst particle emitter von Fieldbook aus der Kategorie Animation.
1672Burst particle emitterAnimationUmhüllt jedes Element und feuert einen gestaffelten Fächer kleiner Flecken von einer ausgewählten Kante ab, beim Klicken, in einer Schleife oder beim ersten Scrollen in die Ansicht.