preact-transitioning

Exposes Preact components for easily implementing basic CSS animations and transitions.

Lightweight and fast implementation. Inspired by react-transition-group and has almost the same API. Please take a look how it works.

Installation

npm i preact-transitioning

Demo

Demo / Source

Usage

Transition Component

The Transition component controls the mounting and unmounting of a component with transitions.

1import { Transition } from 'preact-transitioning'
2
3...
4
5<Transition
6  in={!hidden}
7  appear
8  exit={false}
9>
10  {(transitionState) => (
11    <pre>
12      {JSON.stringify(transitionState)}
13    </pre>
14  )}
15</Transition>

CSSTransition Component

The CSSTransition component applies CSS classes to animate components based on their state.

1import { CSSTransition } from 'preact-transitioning'
2
3...
4
5<CSSTransition
6  in={!hidden}
7  classNames="fade"
8>
9  <div>
10    Animated element
11  </div>
12</CSSTransition>

StyleTransition Component

The StyleTransition component applies inline styles to animate components based on their state.

1import { StyleTransition } from 'preact-transitioning'
2
3...
4
5<StyleTransition
6  in={!hidden}
7  duration={300}
8  styles={{
9    enter: { opacity: 0 },
10    enterActive: { opacity: 1 },
11  }}
12>
13  <div style={{ transition: 'opacity 300ms' }}>
14    Animated element
15  </div>
16</StyleTransition>

TransitionGroup Component

The TransitionGroup component manages a set of transitions as a group.

1import { TransitionGroup } from 'preact-transitioning'
2
3...
4
5<TransitionGroup duration={300}>
6  {items.map((item) => (
7    <CSSTransition
8      key={item.key}
9      classNames="fade"
10    >
11      <div>
12        {renderItem(item)}
13      </div>
14    </CSSTransition>
15  ))}
16</TransitionGroup>

Detecting transition end:

1<CSSTransition
2  in={!hidden}
3  classNames="fade"
4  addEndListener={(node, done) => {
5    node.addEventListener('transitionend', done, { once: true, capture: false })
6  }}
7>
8  <div>
9    Animated element
10  </div>
11</CSSTransition>

Using event callbacks to animate height:

1<CSSTransition
2  in={!hidden}
3  classNames="fade"
4  onEnter={(node) => {
5    node.style.height = `${node.scrollHeight}px`
6  }}
7  onEntered={(node) => {
8    node.style.height = ''
9  }}
10  onExit={(node) => {
11    node.style.height = `${node.scrollHeight}px`
12    // force reflow
13    node.clientHeight
14  }}
15>
16  <div>
17    Animated element
18  </div>
19</CSSTransition>

API

Transition Props

1type TransitionProps = {
2  children: (transitionState: TransitionState, activePhase: Phase) => ComponentChildren
3  in?: boolean = false
4  appear?: boolean = false
5  enter?: boolean = true
6  exit?: boolean = true
7  duration?: number = 500
8  alwaysMounted?: boolean = false
9  onEnter?: (node?: Element | Text) => void
10  onEntering?: (node?: Element | Text) => void
11  onEntered?: (node?: Element | Text) => void
12  onExit?: (node?: Element | Text) => void
13  onExiting?: (node?: Element | Text) => void
14  onExited?: (node?: Element | Text) => void
15  addEndListener?: (node: Element | Text, done: () => void) => void
16}

The TransitionState passed to the children function has the following structure:

1type TransitionState = {
2  appear: boolean
3  appearActive: boolean
4  appearDone: boolean
5  enter: boolean
6  enterActive: boolean
7  enterDone: boolean
8  exit: boolean
9  exitActive: boolean
10  exitDone: boolean
11}

CSSTransition Props

1type CSSTransitionProps = TransitionProps & {
2  children: VNode<any>
3  classNames: string | {
4    appear?: string
5    appearActive?: string
6    appearDone?: string
7    enter?: string
8    enterActive?: string
9    enterDone?: string
10    exit?: string
11    exitActive?: string
12    exitDone?: string
13  }
14}

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

1type StyleTransitionProps = TransitionProps & {
2  children: VNode<any>
3  styles: {
4    appear?: object
5    appearActive?: object
6    appearDone?: object
7    enter?: object
8    enterActive?: object
9    enterDone?: object
10    exit?: object
11    exitActive?: object
12    exitDone?: object
13  }
14}

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

1type TransitionGroupProps = {
2  children: ComponentChildren
3  appear?: boolean
4  enter?: boolean
5  exit?: boolean
6  duration?: number
7}

License

MIT