Transition Effect in React JS without any package

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!!!!