Bounce, Fade, Animate
05/03/2019 11:56:52 PM
Intro into React Transitions
In case you are a newbie in the world of react transitions, you should probably read this post (React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor) before continuing.
If you want to animate a react component, wrap it with <Transition> component so that you can gain access to the state of what is being animated. There are four main states: entering, entered, exiting and exited. The following is a simple example of using the transition to fade in a text box on click and fade out on the next click.
Example of <Transition> Component Usage
Example of <CSSTransition> Component Usage
Note: The classes are added to the classList of the node you are animating one after the other and removed. So you do not need to add a transition property in the style for each of the classes.
Here are slightly more interesting ways of using these components for you web application.
The goal here was to animate the opening of each “item” from the list of items by expanding it to fill the room.
Compared to the above example, this one is very simple and straightforward. The goal here was to show different ways of animating a textbox on click. One way is to simply show the box, just after the action button had faded out, while the other method involved initially fading out the text in the action button, then increasing both its width and its height and followed by a slow fade in of the text. So basically, one is over the top (unnecessary) and the other is simple.
- React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor
- Material Motion