Preact components for easily implementing basic CSS animations and transitions
npm install preact-transitioning
A library that provides components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. Lightweight and has no dependencies. Inspired by react-transition-group and has almost the same API.
``tsx`
Fading element
To install preact-transitioning, run the following command in your project:
`bash`
npm install preact-transitioningor
yarn add preact-transitioning
For more detailed information and usage examples, check out the Docs.
The Transition component allows you to control the mounting and unmounting of an element with transitions.
`tsx
import { Transition } from 'preact-transitioning'
...
{(transitionState) => (
{JSON.stringify(transitionState)}
)}
`
The CSSTransition component applies CSS classes based on the current transition state.
`tsx
import { CSSTransition } from 'preact-transitioning'
...
Animated element
`
The StyleTransition component applies inline styles based on the current transition state. This is useful for customizing transitions without external CSS.
`tsx
import { StyleTransition } from 'preact-transitioning'
...
duration={300}
styles={{
enter: { opacity: 0 },
enterActive: { opacity: 1 },
}}
>
$3
The
component handles a set of elements, animating them as they are added or removed from the DOM.`tsx
import { TransitionGroup } from 'preact-transitioning'...
{items.map((item) => (
{item.label}
))}
`Component Props
$3
ts
type TransitionProps = {
children: (transitionState: TransitionState, activePhase: Phase) => ComponentChildren;
in?: boolean;
appear?: boolean;
enter?: boolean;
exit?: boolean;
duration?: number;
alwaysMounted?: boolean;
addEndListener?: (node: Element | Text, done: () => void) => void;
onEnter: () => void;
onEntering: () => void;
onEntered: () => void;
onExit: () => void;
onExiting: () => void;
onExited: () => void;
}
`The
passed to the children function has the following structure:`ts
type TransitionState = {
appear: boolean;
appearActive: boolean;
appearDone: boolean;
enter: boolean;
enterActive: boolean;
enterDone: boolean;
exit: boolean;
exitActive: boolean;
exitDone: boolean;
}
`$3
ts
type CSSTransitionProps = Omit & {
children: VNode<{ class?: any; }>;
classNames: string | {
appear?: string;
appearActive?: string;
appearDone?: string;
enter?: string;
enterActive?: string;
enterDone?: string;
exit?: string;
exitActive?: string;
exitDone?: string;
};
}
`if
is a string, then the computed className will be suffixed based on the current transition state.
For example, when classNames is "fade", the fade-appear-active class will be applied during the appearActive phase.If
classNames is an object, the final className will be taken from that object based on the current transition state.$3
`ts
type StyleTransitionProps = Omit & {
children: VNode<{ style?: any; }>;
styles: {
appear?: object;
appearActive?: object;
appearDone?: object;
enter?: object;
enterActive?: object;
enterDone?: object;
exit?: object;
exitActive?: object;
exitDone?: object;
};
}
`The
prop allows you to define inline styles based on the current transition state. For example, when the element enters, the enterActive styles will be applied.$3
`ts
type TransitionGroupProps = {
children: ComponentChildren;
appear?: boolean;
enter?: boolean;
exit?: boolean;
duration?: number;
}
``MIT