Transitions et easing
Les variables de transition sont utilisées pour fournir des durées d'animation cohérentes dans votre application. Elles contrôlent la durée nécessaire pour qu'une animation se termine.
Exemple
.element {
transition: background-color var(--dwc-transition-slow);
}
Variables
| Variable | Valeur par défaut |
|---|---|
--dwc-transition-x-slow | 1000ms |
--dwc-transition-slow | 300ms |
--dwc-transition-medium | 250ms |
--dwc-transition-fast | 150ms |
--dwc-transition-x-fast | 100ms |
--dwc-transition | var(--dwc-transition-medium) |
Easing
Les variables d'easing définissent comment les valeurs changent au fil du temps, rendant les transitions plus naturelles.
Exemple
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Easing standard
Ce sont les courbes d'easing à usage général utilisées par la plupart des composants :
| Variable | Cubic Bezier |
|---|---|
--dwc-ease | cubic-bezier(0.4, 0, 0.2, 1) |
--dwc-ease-out | cubic-bezier(0, 0, 0.2, 1) |
--dwc-ease-in | cubic-bezier(0.4, 0, 1, 1) |
--dwc-ease-outGlide | cubic-bezier(0.32, 0.72, 0, 1) |
Easing étendues
| Variable | Cubic Bezier | Lien de test |
|---|---|---|
--dwc-ease-inQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) | Tester |
--dwc-ease-outQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) | Tester |
--dwc-ease-inOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) | Tester |
--dwc-ease-inCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) | Tester |
--dwc-ease-outCubic | cubic-bezier(0.215, 0.61, 0.355, 1) | Tester |
--dwc-ease-inOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) | Tester |
--dwc-ease-inQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) | Tester |
--dwc-ease-outQuart | cubic-bezier(0.165, 0.84, 0.44, 1) | Tester |
--dwc-ease-inOutQuart | cubic-bezier(0.77, 0, 0.175, 1) | Tester |
--dwc-ease-inQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) | Tester |
--dwc-ease-outQuint | cubic-bezier(0.23, 1, 0.32, 1) | Tester |
--dwc-ease-inOutQuint | cubic-bezier(0.86, 0, 0.07, 1) | Tester |
--dwc-ease-inExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) | Tester |
--dwc-ease-outExpo | cubic-bezier(0.19, 1, 0.22, 1) | Tester |
--dwc-ease-inOutExpo | cubic-bezier(1, 0, 0, 1) | Tester |
--dwc-ease-inCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) | Tester |
--dwc-ease-outCirc | cubic-bezier(0.075, 0.82, 0.165, 1) | Tester |
--dwc-ease-inOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) | Tester |
--dwc-ease-inBack | cubic-bezier(0.36, 0, 0.66, -0.56) | Tester |
--dwc-ease-outBack | cubic-bezier(0.34, 1.56, 0.64, 1) | Tester |
--dwc-ease-inOutBack | cubic-bezier(0.68, -0.6, 0.32, 1.6) | Tester |
Mouvement réduit
webforJ respecte la préférence d'accessibilité « réduire le mouvement » de l'utilisateur. Lorsqu'elle est activée au niveau du système d'exploitation, webforJ désactive automatiquement les animations non essentielles dans tous les composants. Aucune code Java n'est requis.
Paramètres de réduction du mouvement au niveau du système d'exploitation
Où les utilisateurs activent la préférence :
- Windows 10/11 : Paramètres > Accessibilité > Affichage > Afficher les animations dans Windows
- macOS : Paramètres système > Accessibilité > Affichage > Réduire le mouvement
- iOS : Paramètres > Accessibilité > Mouvement > Réduire le mouvement
- Android : Paramètres > Accessibilité > Supprimer les animations
