OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

useInterval JS useState React and Animation CSS

  • Thread starter Thread starter KIX
  • Start date Start date
K

KIX

Guest
I am changing text between two values using React useState and setInterval and it works fine.

Code:
function Home() {
  const [role, setRole] = useState("Text A");

  const inter = setInterval(() => {
    changeHome();
  }, 5000);

  function changeHome() {
    role === "Text A" ? setRole("Text B") : setRole("Text A");

    clearInterval(inter);
  }

  useEffect(() => {
    //className&&setClassName("fade")
  }, [role]);

  return (
    <div id="home">
      <div className="text">
        <span>Hello!</span>
        <h1>
          I'm <span>Karim Isaac</span>
        </h1>
        <h2 className="fade">{role}</h2>

        <Stack spacing={2} direction={"row"}>
          <StyledButton variant="contained">Hire Me</StyledButton>
          <StyledButton variant="contained">My works</StyledButton>
        </Stack>
      </div>
    </div>
  );
}

export default Home;

I am trying to add animation to the text when it changes using CSS:

Code:
@keyframes fade-down {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade {
  animation: fade-down 2.5s infinite alternate;
}

It works but the timing is not perfectly well. I think that's because there are two timers; setinterval and animation timer.

<p>I am changing text between two values using React <code>useState</code> and <code>setInterval</code> and it works fine.</p>
<pre class="lang-js prettyprint-override"><code>function Home() {
const [role, setRole] = useState("Text A");

const inter = setInterval(() => {
changeHome();
}, 5000);

function changeHome() {
role === "Text A" ? setRole("Text B") : setRole("Text A");

clearInterval(inter);
}

useEffect(() => {
//className&&setClassName("fade")
}, [role]);

return (
<div id="home">
<div className="text">
<span>Hello!</span>
<h1>
I'm <span>Karim Isaac</span>
</h1>
<h2 className="fade">{role}</h2>

<Stack spacing={2} direction={"row"}>
<StyledButton variant="contained">Hire Me</StyledButton>
<StyledButton variant="contained">My works</StyledButton>
</Stack>
</div>
</div>
);
}

export default Home;
</code></pre>
<p>I am trying to add animation to the text when it changes using CSS:</p>
<pre class="lang-css prettyprint-override"><code>@keyframes fade-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fade {
animation: fade-down 2.5s infinite alternate;
}
</code></pre>
<p>It works but the timing is not perfectly well. I think that's because there are two timers; <code>setinterval</code> and animation timer.</p>
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top