Is there a way to fill up the delay of useState? - reactjs

Question

I'm new to React and I'm trying to make a simple animation, but when the animation ends there is literally a split second that is showing the old values of opacitate & translate.Is there a way that i can make that dissapper?
I've tried to use useRef and re-render the component but no luck.Ignore the timeout functionz
const { useEffect, useState } = React;
const Titlu = () => {
let [opacitate, setOpacitate] = useState(0);
let [translate, setTranslate] = useState(-30);
function Schimba() {
setOpacitate(prevOpacity => prevOpacity = 1);
setTranslate(prevTranslate => prevTranslate = 20);
}
function timeout(timp) {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
})
}
return (
<div className="Part1">
<h1 className="ForkyTitlu"
onAnimationEnd={Schimba}
style={{
opacity:opacitate,
transform: `translate(${translate}%, 0%)`
}} >
<span className ="Forky">Forky</span>
<span className ="Nutrition">Nutrition</span>
</h1>
</div>
);
}
ReactDOM
.createRoot(root)
.render(<Titlu />);
.Part1 {
display: inline-flex;
margin-bottom: 50vh;
border-bottom: 3px black;
}
.ForkyTitlu {
color: orange;
font-size: 3vw;
/*
margin-left: 12vw;
margin-top: 40vh;
transform: translateX(-50%);
*/
animation-name: titluAnimation;
animation-delay: 1s;
animation-duration: 2s;
animation-iteration-count: 1;
position: relative;
}
#keyframes titluAnimation {
100% {
opacity: 1;
transform: translateX(20%);
}
}
.Forky {
color: black;
font-size: 9vw;
text-shadow: -30px 15px 30px #0000009c;
}
.Nutrition {
color: orange;
font-size: 3.5vw;
text-shadow: -30px 15px 30px orange;
}
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

When onAnimationEnd calls Schimba, the animation is over, and the CSS values are resettled top their original values. This is the gap you're seeing.
However, you don't really need a state. Move all animation related properties, including the initial state to the animation:
#keyframes titluAnimation {
from {
opacity: 0;
transform: translateX(-30%);
}
to {
opacity: 1;
transform: translateX(20%);
}
}
And define the animation-fill-mode (I've used the animation shorthand) to be forwards:
animation: titluAnimation 2s forwards;
forwards
The target will retain the computed values set by the last keyframe encountered during execution.
const Titlu = () => (
<div className = "Part1">
<h1 className = "ForkyTitlu">
<span className ="Forky">Forky</span>
<span className ="Nutrition">Nutrition</span>
</h1>
</div>
);
ReactDOM
.createRoot(root)
.render(<Titlu />);
.Part1 {
display: inline-flex;
margin-bottom: 50vh;
border-bottom: 3px black;
}
.ForkyTitlu {
color: orange;
font-size: 3vw;
animation: titluAnimation 2s forwards;
position: relative;
}
#keyframes titluAnimation {
from {
opacity: 0;
transform: translateX(-30%);
}
to {
opacity: 1;
transform: translateX(20%);
}
}
.Forky {
color: black;
font-size: 9vw;
text-shadow: -30px 15px 30px #0000009c;
}
.Nutrition {
color: orange;
font-size: 3.5vw;
text-shadow: -30px 15px 30px orange;
}
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root"></div>
If you want/need to use state to control the animation, it's better to define the start/end states as classes, toggle them with the state, and use CSS transition to animate the change.
Example - click the Toggle button to see the animation:
const { useState } = React;
const Titlu = () => {
const [start, setState] = useState(true);
const toggleStart = () => setState(s => !s);
return (
<div>
<div className = "Part1">
<h1 className = {`ForkyTitlu ${start ? 'start' : 'end'}`}>
<span className ="Forky">Forky</span>
<span className ="Nutrition">Nutrition</span>
</h1>
</div>
<button onClick={toggleStart}>Toggle</button>
</div>
);
};
ReactDOM
.createRoot(root)
.render(<Titlu />);
.Part1 {
display: flex;
border-bottom: 3px black;
}
.ForkyTitlu {
color: orange;
font-size: 3vw;
position: relative;
transition: all 2s;
}
.ForkyTitlu.start {
opacity: 0;
transform: translateX(-30%);
}
.ForkyTitlu.end {
opacity: 1;
transform: translateX(20%);
}
.Forky {
color: black;
font-size: 9vw;
text-shadow: -30px 15px 30px #0000009c;
}
.Nutrition {
color: orange;
font-size: 3.5vw;
text-shadow: -30px 15px 30px orange;
}
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root"></div>