CSS: transition

.instui-transition — Enter/exit animation CSS: put .instui-transition on an element and toggle a .-<type>-<state> class (fade, scale, or slide-{up,down,left,right} × entering/entered/exiting/exited) from your own JS to animate it in and out.

Group: Plugins · Source: generate.ts

Usage

@import "@pantoken/plugin-transition/transition.css";

Examples

<div class="instui-transition -fade-entered">Faded in.</div>

Faded in.

Modifiers

Modifier	Description
.-fade-entered	The fade transition's "entered" state.
.-fade-entering	The fade transition's "entering" state.
.-fade-exited	The fade transition's "exited" state.
.-fade-exiting	The fade transition's "exiting" state.
.-scale-entered	The scale transition's "entered" state.
.-scale-entering	The scale transition's "entering" state.
.-scale-exited	The scale transition's "exited" state.
.-scale-exiting	The scale transition's "exiting" state.
.-slide-down-entered	The slide down transition's "entered" state.
.-slide-down-entering	The slide down transition's "entering" state.
.-slide-down-exited	The slide down transition's "exited" state.
.-slide-down-exiting	The slide down transition's "exiting" state.
.-slide-left-entered	The slide left transition's "entered" state.
.-slide-left-entering	The slide left transition's "entering" state.
.-slide-left-exited	The slide left transition's "exited" state.
.-slide-left-exiting	The slide left transition's "exiting" state.
.-slide-right-entered	The slide right transition's "entered" state.
.-slide-right-entering	The slide right transition's "entering" state.
.-slide-right-exited	The slide right transition's "exited" state.
.-slide-right-exiting	The slide right transition's "exiting" state.
.-slide-up-entered	The slide up transition's "entered" state.
.-slide-up-entering	The slide up transition's "entering" state.
.-slide-up-exited	The slide up transition's "exited" state.
.-slide-up-exiting	The slide up transition's "exiting" state.

Custom properties

Property	Type	Default	Description
--instui-transition-duration	—	—	The animation duration (default 300ms).
--instui-transition-timing	—	—	The animation timing function (default ease-in-out).