Animating a component with ReactJs can be achieved using various methods. Libraries like React-spring and React-motion are available to help with this. Here’s an example using the CSS transition property:
Firstly, define CSS styles with transitions:
```
.example-enter {
opacity: 0;
transform: translateY(-20px);
}
.example-enter-active {
opacity: 1;
transform: translateY(0px);
transition: opacity 500ms, transform 500ms;
}
.example-exit {
opacity: 1;
}
.example-exit-active {
opacity: 0;
transition: opacity 500ms;
}
```
Then, using React transition group:
1. First, ensure that the react-transition-group package is installed in your working environment. If it’s not, install by using this command: `npm install react-transition-group`.
1. Then you could use it in your component:
```
import React from ‘react’;
import { CSSTransition } from ‘react-transition-group’;
class ExampleComponent extends React.Component { constructor(props) { super(props);
this.state = { show: false }; } toggle = () => { this.setState(state => ({ show: !state.show })); }; render() { return (export default ExampleComponent;
```
In the above example, “example” in `classNames=“example”` correspond to the prefixes of css classes in your css file. For example, `example-enter`, `example-enter-active`, etc.
Whenever the `toggle` function is called, the `show` variable in the state flips between true and false causing the component to re-render. The `CSSTransition` component uses the `in` prop to decide which transition to apply.
This is a basic example. Depending on your needs, these libraries offer more advanced functionalities and other transition options.
