Transition Effect in React JS without any package

Akshan — Thu, 01 Dec 2022 08:30:30 +0000

Hola Amigo!

I have searched for applying transition effect when a component renders in the application. Unlike Js Css transition is not working on the react. So when I searched for applying the transition effect, I did not get a satisfactory result (React transition group felt hard for me). So I planned to apply the transition effects without any packages and I succeeded in it.

here is the Code

Transition.jsx

import {useState,UseEffect} from 'react';
import ".\transtion.css"

export default function TransitionContainer (){
const [transition,setTransition]=useState(false);

useEffect(()=>{
 setTransition(true)
},[])

return(
<div className={`animate ${transition?'displayIt':'noDisplay'}`}>
 /* content here */
</div>

in css we have to add the code given

transition.css

.animate{
   transition: 0.5s ease-in;
}

.displayIt{
   opacity:1;
}
.noDisplay{
   opacity:0;
}

we can achieve the transition effect when a screen renders using useState and useEffect.

(Note: this is my first post so if anything feels odd....please comment so that I can rectify it)

Adios Amigo!!!!

DEV Community: Akshan

Transition Effect in React JS without any package