Unis Transition
Transition component for unis inspired by React Transition Group
.
Install
npm i @unis/transition
Usage
import { useState } from '@unis/unis';
import { CSSTransition, TransitionGroup } from '@unis/transition'
const App = () => {
let [visible, setVisible] = useState(false);
const handleToggle = () => {
setVisible(!visible);
}
return () => (
<Fragment>
<button onClick={handleToggle}>toggle</button>
<CSSTransition in={visible} timeout={400} classNames="fade">
<div>
hello
</div>
</CSSTransition>
</Fragment>
)
}
.fade-appear {
opacity: 0;
}
.fade-appear-active {
opacity: 1;
transition: all 0.4s ease;
}
.fade-appear-done {
opacity: 1;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: all 0.4s ease;
}
.fade-enter-done {
opacity: 1;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: all 0.4s ease;
}
.fade-exit-done {
opacity: 0;
}
Online demo here
CSSTransition
Component API as close to React Transition Group
as possible.
in
Show the component.
type: boolean
default: false
mountOnEnter
By default the child component is mounted on the first in={true}
. you can set mountOnEnter={false}
child component will be mounted immediately with parent component.
type: boolean
default: true
unmountOnExit
By default the child component is unmounted after it finishes exiting. you can set unmountOnExit={false}
child component stays mounted after it reaches the 'exited' state.
type: boolean
default: true
classNames
type:
string | {
appear?: string,
appearActive?: string,
appearDone?: string,
enter?: string,
enterActive?: string,
enterDone?: string,
exit?: string,
exitActive?: string,
exitDone?: string,
}
default: ''
for example classNames="fade"
it will apply classes below
-
fade-appear
,fade-appear-active
,fade-appear-done
-
fade-enter
,fade-enter-active
,fade-enter-done
-
fade-exit
,fade-exit-active
,fade-exit-done
onEnter
Callback fired immediately after the 'enter' or 'appear' class is applied.
type: Function(node: HtmlElement)
onEntering
Callback fired immediately after the 'enter-active' or 'appear-active' class is applied.
type: Function(node: HtmlElement)
onEntered
Callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.
type: Function(node: HtmlElement)
onExit
Callback fired immediately after the 'exit' class is applied.
type: Function(node: HtmlElement)
onExiting
Callback fired immediately after the 'exit-active' is applied.
type: Function(node: HtmlElement)
onExited
Callback fired immediately after the 'exit' classes are removed and the exit-done class is added to the DOM node.
type: Function(node?: HtmlElement)
TransitionGroup
Easy to use, just wrap on CSSTransition
with key.
<TransitionGroup>
{list.map((item, index) => (
<CSSTransition key={item.id} timeout={400} classNames="fade">
<div>{item.name}</div>
</CSSTransition>
))}
</TransitionGroup>