CSS: transition
.instui-transition — Belépés/kilépés animáció CSS: helyezzen .instui-transition-t egy elemre és váltogasson .-<type>-<state> osztályt (fade, scale, vagy slide-{up,down,left,right} × entering/entered/exiting/exited) a saját JS-ből az animálásához be és ki.
Csoport: Bővítmények · Forrás: generate.ts
Használat
css
@import "@pantoken/plugin-transition/transition.css";Példák
html
<div class="instui-transition -fade-entered">Faded in.</div>Faded in.
Módosítók
| Módosító | Leírás |
|---|---|
.-fade-entered | A fade átmenet "belépett" állapota. |
.-fade-entering | A fade átmenet "belépő" állapota. |
.-fade-exited | A fade átmenet "kilépett" állapota. |
.-fade-exiting | A fade átmenet "kilépő" állapota. |
.-scale-entered | A scale átmenet "belépett" állapota. |
.-scale-entering | A scale átmenet "belépő" állapota. |
.-scale-exited | A scale átmenet "kilépett" állapota. |
.-scale-exiting | A scale átmenet "kilépő" állapota. |
.-slide-down-entered | A slide down átmenet "belépett" állapota. |
.-slide-down-entering | A slide down átmenet "belépő" állapota. |
.-slide-down-exited | A slide down átmenet "kilépett" állapota. |
.-slide-down-exiting | A slide down átmenet "kilépő" állapota. |
.-slide-left-entered | A slide left átmenet "belépett" állapota. |
.-slide-left-entering | A slide left átmenet "belépő" állapota. |
.-slide-left-exited | A slide left átmenet "kilépett" állapota. |
.-slide-left-exiting | A slide left átmenet "kilépő" állapota. |
.-slide-right-entered | A slide right átmenet "belépett" állapota. |
.-slide-right-entering | A slide right átmenet "belépő" állapota. |
.-slide-right-exited | A slide right átmenet "kilépett" állapota. |
.-slide-right-exiting | A slide right átmenet "kilépő" állapota. |
.-slide-up-entered | A slide up átmenet "belépett" állapota. |
.-slide-up-entering | A slide up átmenet "belépő" állapota. |
.-slide-up-exited | A slide up átmenet "kilépett" állapota. |
.-slide-up-exiting | A slide up átmenet "kilépő" állapota. |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--instui-transition-duration | — | — | Az animáció időtartama (alapértelmezés 300ms). |
--instui-transition-timing | — | — | Az animáció időzítési függvénye (alapértelmezés ease-in-out). |