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!!!!
Top comments (0)