https://github.com/fakundo/preact-transitioning
Preact components for easily implementing basic CSS animations and transitions
https://github.com/fakundo/preact-transitioning
animation preact transition transition-group
Last synced: 12 days ago
JSON representation
Preact components for easily implementing basic CSS animations and transitions
- Host: GitHub
- URL: https://github.com/fakundo/preact-transitioning
- Owner: fakundo
- License: mit
- Created: 2020-02-19T14:25:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-10-22T13:59:43.000Z (15 days ago)
- Last Synced: 2025-10-22T15:36:37.068Z (15 days ago)
- Topics: animation, preact, transition, transition-group
- Language: TypeScript
- Homepage: https://fakundo.github.io/preact-transitioning/
- Size: 2.2 MB
- Stars: 48
- Watchers: 2
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - Preact Transitioning - Exposes Preact components for easily implementing basic CSS animations and transitions. (Uncategorized / Uncategorized)
README
# preact-transitioning
[](https://www.npmjs.com/package/preact-transitioning)
[](https://github.com/fakundo/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](https://reactcommunity.org/react-transition-group/) and has almost the same API.
```tsx
Fading element
```
## Installation
To install `preact-transitioning`, run the following command in your project:
```bash
npm install preact-transitioning
# or
yarn add preact-transitioning
```
## Documentation
For more detailed information and usage examples, check out the [Docs](https://fakundo.github.io/preact-transitioning/).
## Quick Review
### Transition Component
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)}
)}
```
### CSSTransition Component
The `CSSTransition` component applies CSS classes based on the current transition state.
```tsx
import { CSSTransition } from 'preact-transitioning'
...
Animated element
```
### StyleTransition Component
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'
...
Animated element
```
### TransitionGroup Component
The `TransitionGroup` 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
### TransitionProps
```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 `TransitionState` 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;
}
```
### CSSTransitionProps
```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 `classNames` 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.
### StyleTransitionProps
```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 `styles` 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.
### TransitionGroupProps
```ts
type TransitionGroupProps = {
children: ComponentChildren;
appear?: boolean;
enter?: boolean;
exit?: boolean;
duration?: number;
}
```
## License
MIT