Question 305267 in Html Question posted in
Some basic documentation can be found here.

Html – How to use CSS transitions on react useState elements?

I have a website in which I want to change between different HTML sections, and during these changes that happen in a click of an button I want for the section to for example just fade in.

I made a little test run here is the html:

   const [isTestWorking, setIsTestWorking] = useState("test-1");
   
   {isTestWorking == "test-1" && (
            <section 
              className={`test1 ${isTestWorking == "test-1" ? "show" : ""}`}
            >
              <h1>Testing 1</h1>
              <button
                onClick={() => {
                  setIsTestWorking("test-2");
                }}
              >
                Transition
              </button>
            </section>
   )}

   {isTestWorking == "test-2" && (
            <section 
              className={`test2 ${isTestWorking == "test-2" ? "show" : ""}`}
            >
              <h1>Testing 2</h1>
              <button
                onClick={() => {
                  setIsTestWorking("test-1");
                }}
              >
                Transition
              </button>
            </section>
   )}

And here is the CSS:

   .test1 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
   }

   .test1.show {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
   }

   .test2 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
   }

   .test2.show {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
   }

I expected for this to work just fine but I think that the element gets loaded up onto the website after the animation has already played in the background.
I don’t know what to do know so if you could please help me I would be very grateful.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    With copilot I found out that when I use animations instead of the transitions It does finally fade in like I wanted it. Just for reference here is the CSS:

    .test1, .test2 {
  animation: fade-in 1.5s forwards;
}

@keyframes fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

    And here is the changed html:

    {isTestWorking === "test-1" && (
  <section className={`test1`}>
      <h1>Testing 1</h1>
  </section>
)}

{isTestWorking === "test-2" && (
  <section className={`test2`}>
      <h1>Testing 2</h1>
  </section>
)}

<button
  onClick={() => {
    setIsTestWorking("test-2");
  }}
>
  Transition
</button>

  2. 0

    you can introduce a slight delay in changing the state to ensure the transition is seen after the new section has rendered.

    import React, { useState, useEffect } from "react";

const YourComponent = () => {
  const [isTestWorking, setIsTestWorking] = useState("test-1");

  useEffect(() => {
    const timeout = setTimeout(() => {
      // Delay the state change after a short time to ensure the section is rendered before transitioning
      clearTimeout(timeout);
      setIsTestWorking(isTestWorking === "test-1" ? "test-2" : "test-1");
    }, 100); // Adjust the delay time as needed
  }, [isTestWorking]);

  return (
    <>
      {isTestWorking === "test-1" && (
        <section className={`test1 ${isTestWorking === "test-1" ? "show" : ""}`}>
          <h1>Testing 1</h1>
          <button
            onClick={() => {
              setIsTestWorking("test-2");
            }}
          >
            Transition
          </button>
        </section>
      )}

      {isTestWorking === "test-2" && (
        <section className={`test2 ${isTestWorking === "test-2" ? "show" : ""}`}>
          <h1>Testing 2</h1>
          <button
            onClick={() => {
              setIsTestWorking("test-1");
            }}
          >
            Transition
          </button>
        </section>
      )}
    </>
  );
};

export default YourComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search