How to make beautiful box transition with React js

In this article, we are going to learn how to make beautiful box transition with anime js in React.
First we need to create the Box component,In this component we have to make the ref of div and import anime from animejs,then we have to pass te arguments in anime()

Example

box.js file is displayed below:

1import React from "react"
2import {useRef,useEffect} from "react"
3import anime from "animejs";
4import'./styles.css'
5 const Box=(props)=>{
6  const myRef=useRef()
7  useEffect(() => {
8    myRef.current.style.opacity = 0;
9    setTimeout(() => {
10      anime({
11        targets: myRef.current,
12        opacity: [0, 1],
13        translateY: [100, 0],
14        duration: 500,
15        easing: "easeOutSine"
16      });
17    }, 100);
18  }
19  , [])
20  return(<div ref={myRef} className="box" />)
21}
22export default Box

We are going to make the app file ,in which we are going to make one button which is named as a toogle

1import "./styles.css";
2import './styles.css'
3import React,{useEffect, useState} from "react"
4import Box from './box'
5
6export default function App() {
7 
8const[ShowBox,setShowBox]=useState(false)
9 console.log("showbox",ShowBox)
10  return (
11    <>
12<button onClick={() => setShowBox({ ShowBox:!ShowBox })}>
13          Toggle
14        </button>
15        {
16        ShowBox && <Box />
17        }
18    </>
19  );
20}

Here is the link of live example which we done so far:
Click here