Animation
Interruptible hover swell
Interruptible hover swell: Eine Kachel, deren zweistufiges Hover-Anschwellen immer bei ihrer aktuellen Größe beginnt, sodass sie beim Ein- und Ausschalten des Zeigers niemals einrastet.
Interruptible hover swell verwenden
Interruptible hover swell verwendet das Vorschauformat „Inline“ 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.
| Einstellung | Typ | Standardwert | Vorschaugrenzen |
|---|---|---|---|
stageOneScale | number | 1.1 | Von 1 bis 1.4; Schrittweite 0.05 |
peakScale | number | 1.6 | Von 1.1 bis 2.4; Schrittweite 0.05 |
duration | number | 0.5 | Von 0.15 bis 1.5; Schrittweite 0.05 |
accent | color | #7C5CFF | Keine weitere Grenze in den Metadaten. |
showValue | boolean | true | Keine weitere Grenze in den Metadaten. |
Für welche Frameworks ist Interruptible hover swell verfügbar?
Interruptible hover swell 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 Interruptible hover swell?
Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx.
Welche Details zur Barrierefreiheit sind in Interruptible hover swell erkennbar?
Der React-Quellcode von Interruptible hover swell enthält: Attribute und Ereignisbehandler (aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.
Wie berücksichtigt Interruptible hover swell reduzierte Bewegung?
Interruptible hover swell liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: reduced ? REDUCED_SECONDS : duration * RETURN_FACTOR; ease: reduced ? "easeOut" : EASE_RETURN. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.
