Transitions & Easing
Siirtymämismuutujia käytetään tarjoamaan johdonmukaisia animaatioiden kestoja sovelluksessasi. Ne ohjaavat kuinka kauan animaatio kestää suorittaa.
Esimerkki
.element {
transition: background-color var(--dwc-transition-slow);
}
Muuttujat
| Muuttuja | Oletusarvo |
|---|---|
--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) |
Helpotukset
Helpotusmuuttujat määrittelevät, kuinka arvot muuttuvat ajan myötä, mikä tekee siirtymistä luonnollisemman tuntuisen.
Esimerkki
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
Viralliset helpotukset
Nämä ovat yleiskäyttöisiä helpotuskäyriä, joita useimmat komponentit käyttävät:
| Muuttuja | 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) |
Laajennetut helpotukset
| Muuttuja | Cubic Bezier | Testilinkki |
|---|---|---|
--dwc-ease-inQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) | Testaa se |
--dwc-ease-outQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) | Testaa se |
--dwc-ease-inOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) | Testaa se |
--dwc-ease-inCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) | Testaa se |
--dwc-ease-outCubic | cubic-bezier(0.215, 0.61, 0.355, 1) | Testaa se |
--dwc-ease-inOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) | Testaa se |
--dwc-ease-inQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) | Testaa se |
--dwc-ease-outQuart | cubic-bezier(0.165, 0.84, 0.44, 1) | Testaa se |
--dwc-ease-inOutQuart | cubic-bezier(0.77, 0, 0.175, 1) | Testaa se |
--dwc-ease-inQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) | Testaa se |
--dwc-ease-outQuint | cubic-bezier(0.23, 1, 0.32, 1) | Testaa se |
--dwc-ease-inOutQuint | cubic-bezier(0.86, 0, 0.07, 1) | Testaa se |
--dwc-ease-inExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) | Testaa se |
--dwc-ease-outExpo | cubic-bezier(0.19, 1, 0.22, 1) | Testaa se |
--dwc-ease-inOutExpo | cubic-bezier(1, 0, 0, 1) | Testaa se |
--dwc-ease-inCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) | Testaa se |
--dwc-ease-outCirc | cubic-bezier(0.075, 0.82, 0.165, 1) | Testaa se |
--dwc-ease-inOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) | Testaa se |
--dwc-ease-inBack | cubic-bezier(0.36, 0, 0.66, -0.56) | Testaa se |
--dwc-ease-outBack | cubic-bezier(0.34, 1.56, 0.64, 1) | Testaa se |
--dwc-ease-inOutBack | cubic-bezier(0.68, -0.6, 0.32, 1.6) | Testaa se |
Liikenteen vähentäminen
webforJ kunnioittaa käyttäj än "vähennä liikettä" esteettömyysasetusta. Kun se on otettu käyttöön käyttöjärjestelmän tasolla, webforJ poistaa automaattisesti ei-välttämättömät animaatiot kaikista komponenteista. Java-koodia ei tarvita.
Käyttöjärjestelmän tason vähennä liikettä -asetukset
Missä käyttäjät ottavat asetuksen käyttöön:
- Windows 10/11: Asetukset > Helpoitus > Näyttö > Näytä animaatiot Windowsissa
- macOS: Järjestelmäasetukset > Esteettömyys > Näyttö > Vähennä liikettä
- iOS: Asetukset > Esteettömyys > Liike > Vähennä liikettä
- Android: Asetukset > Esteettömyys > Poista animaatiot