react-animation-primitive
Why?
You want a simple declarative animation container for an open / close, enter / leave element. Like a sidenav.
And you want it to weigh <3 kb.
Install
npm install --save react-animation-primitive
Example
<AnimationPrimitive phase=stateisOpen ? 'enter' : 'leave' listenerProp='onTransitionEnd' render= <div ... > <div class='backdrop' onClick= this /> <div class='sidenav'> Sidenav Contents </div> </div> />
API
<AnimationPrimitive>
Props
phase
string
| required
Must be either 'enter'
or 'leave'
.
When a phase is set, it will change the phase, call render, and wait for onTransitionEnd
or onAnimationEnd
(depending on listenerProp
), then call render again.
listenerProp
string
| default'onTransitionEnd'
| optional, one of'onTransitionEnd'
or'onAnimationEnd'
Set whether phases change on transition or animation end events. Defaults to transition events.
render
function
| required
<AnimationPrimitive render={() => <div />} />
The render
prop function is called with the following object:
property | category | type | description |
---|---|---|---|
phase | state | string | The current phase. Either 'enter' or 'leave'. |
phaseActive | state | boolean | Whether this phase is currently running. For example, true if phase was just set to 'enter' and transition is in progress. False when 'enter' transition finishes. |
phaseComplete | state | boolean | Whether a transition just finished. True if this state was active and is no longer active. |
getContainerProps | prop getter | function | Get the props to put on your container element which will be transitioning. Contains a transitionend/animationend event listener. |
License
MIT © Andrew Joslin