Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fakundo/preact-transitioning
Preact components for easily implementing basic CSS animations and transitions
https://github.com/fakundo/preact-transitioning
preact transition transition-group
Last synced: 8 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 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-02T13:23:23.000Z (7 months ago)
- Last Synced: 2024-04-14T10:16:04.685Z (7 months ago)
- Topics: preact, transition, transition-group
- Language: TypeScript
- Homepage: https://fakundo.github.io/preact-transitioning/
- Size: 693 KB
- Stars: 42
- Watchers: 3
- Forks: 7
- Open Issues: 2
-
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)
Exposes Preact components for easily implementing basic CSS animations and transitions.
Lightweight and fast implementation. Inspired by [`react-transition-group`](https://reactcommunity.org/react-transition-group/) and has almost the same API. Please take a look how it works.
## Installation
```
npm i preact-transitioning
```
## Demo
[Demo](https://fakundo.github.io/preact-transitioning/)
/
[Source](https://github.com/fakundo/preact-transitioning/tree/master/examples)
## Usage
### Transition Component
The `Transition` component controls the mounting and unmounting of a component with transitions.
```js
import { Transition } from 'preact-transitioning'
...
{(transitionState) => (
{JSON.stringify(transitionState)}
)}
```
### CSSTransition Component
The `CSSTransition` component applies CSS classes to animate components based on their state.
```js
import { CSSTransition } from 'preact-transitioning'
...
Animated element
```
### StyleTransition Component
The `StyleTransition` component applies inline styles to animate components based on their state.
```js
import { StyleTransition } from 'preact-transitioning'
...
Animated element
```
### TransitionGroup Component
The `TransitionGroup` component manages a set of transitions as a group.
```js
import { TransitionGroup } from 'preact-transitioning'
...
{items.map((item) => (
{renderItem(item)}
))}
```
### Detecting transition end:
```js
{
node.addEventListener('transitionend', done, { once: true, capture: false })
}}
>
Animated element
```
### Using event callbacks to animate height:
```js
{
node.style.height = `${node.scrollHeight}px`
}}
onEntered={(node) => {
node.style.height = ''
}}
onExit={(node) => {
node.style.height = `${node.scrollHeight}px`
// force reflow
node.clientHeight
}}
>
Animated element
```
## API
### Transition Props
```ts
type TransitionProps = {
children: (transitionState: TransitionState, activePhase: Phase) => any
in?: boolean = false
appear?: boolean = false
enter?: boolean = true
exit?: boolean = true
duration?: number = 500
alwaysMounted?: boolean = false
onEnter?: (node: Element) => void
onEntering?: (node: Element) => void
onEntered?: (node: Element) => void
onExit?: (node: Element) => void
onExiting?: (node: Element) => void
onExited?: (node: Element) => void
addEndListener?: (node: Element, done: () => void) => 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
}
```
### CSSTransition Props
```ts
type CSSTransitionProps = TransitionProps & {
children: VNode
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 according to the current transition state. For example, if you pass the string `"fade"` as `classNames`, then `fade-appear-active` className will be applied during the `appearActive` phase.
If `classNames` is an object, then the final className will be taken from that object according to the current transition state. For example, when the element enters, the `enterActive` property will be used as className.
### StyleTransition Props
```ts
type StyleTransitionProps = TransitionProps & {
children: VNode
styles: {
appear?: object
appearActive?: object
appearDone?: object
enter?: object
enterActive?: object
enterDone?: object
exit?: object
exitActive?: object
exitDone?: object
}
}
```
The `styles` prop is used to compute inline styles of the element according to the current transition state. For example, when the element enters, `enterActive` styles will be applied.
### TransitionGroup Props
```ts
type TransitionGroupProps = {
children: any
appear?: boolean
enter?: boolean
exit?: boolean
duration?: number
}
```
## License
MIT