Fade-in a new, revised text after fading-out the original text in ReactJS

Question

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM

Now, I'm attempting to achieve the same effect using React with the following code:

useEffect(() => {
        (function() {

            var quotes = document.getElementsByClassName('tagline-text');
            var quoteIndex = -1;

            function showNextQuote() {
              ++quoteIndex;
              document.querySelectorAll(".tagline-text")[quoteIndex % quotes.length].fadeIn(1000).delay(1000).fadeOut(1000, showNextQuote);
            }

            showNextQuote();

          })();
}, []);

Here's the container element:

<div className="tagline h-100 d-flex flex-column align-items-center justify-content-center">
    <p className="tagline-text">Your Business</p>
    <p className="tagline-text">Your Brand</p>
    <p className="tagline-text">Your Content</p>
    <p className="tagline-text">Your Portfolio</p>
    <p className="tagline-text">You.</p>
</div>

However, when I run the code, I encounter this error message:

Uncaught TypeError: document.querySelectorAll(...)[(quoteIndex % quotes.length)].fadeIn is not a function

javascript jquery css reactjs

Answer 1

Answer №1

that should work.

const { useState, useEffect } = React;

const items = ["Your Business", "Your Brand", "Your Content", "Your Portfolio", "You."];
const time_between_content = 2; // show content for 2s before fading out.
const transition_duration = 0.5;

const App = () => {
  const [displayContent, setDisplayContent] = useState(0);
  
  useEffect(() => {
    const timerId = setInterval(() => {
      setDisplayContent(p => {
        if(p === items.length - 1) p = -transition_duration;
        else p = p + transition_duration;
        return p;
      });
    }, time_between_content * 1000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    {items.map((item, index) => <p key={index} style={{ opacity: `${displayContent === index ? 1 : 0}`, transitionDuration: `${time_between_content + transition_duration}s` }}>{item}</p>)}
</div>
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.pContainer {
  position: relative;
}

.pContainer p {
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

that should work.

const { useState, useEffect } = React;

const items = ["Your Business", "Your Brand", "Your Content", "Your Portfolio", "You."];
const time_between_content = 2; // show content for 2s before fading out.
const transition_duration = 0.5;

const App = () => {
  const [displayContent, setDisplayContent] = useState(0);
  
  useEffect(() => {
    const timerId = setInterval(() => {
      setDisplayContent(p => {
        if(p === items.length - 1) p = -transition_duration;
        else p = p + transition_duration;
        return p;
      });
    }, time_between_content * 1000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    {items.map((item, index) => <p key={index} style={{ opacity: `${displayContent === index ? 1 : 0}`, transitionDuration: `${time_between_content + transition_duration}s` }}>{item}</p>)}
</div>
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.pContainer {
  position: relative;
}

.pContainer p {
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Fade-in a new, revised text after fading-out the original text in ReactJS

Answer №1

Similar questions

Is there a way to horizontally center a content container in Flutter similar to a "max-width" container in CSS?

Dealing with a routing issue in node.js/express involving JavaScript and CSS

Implementing the Upload Feature using AngularJS

Using jQuery to fetch and display content only when the user hovers over

Sharing state between components in NextJS involves using techniques like Context API, passing

Changing the name of a file using NPM

Splitting Angular modules into separate projects with identical configurations

Employing setTimeout within a repetitive sequence

What causes my input field to lose focus in React.js after typing just one character?

Saving Files in Your React Web Application: Tips and Tricks

Looking to include a data-* attribute within a div element for the utilization of a third-party JavaScript library like React or Next.js?

Create a single JSON object by searching through two collections in MongoDB

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Encountering an error message in Material UI that reads: "Error with prop type: isValidElement is not a function" specifically while implementing the mui

Locate and eliminate the item containing specific content

Is there an easy method to compare the CSS styles of a specific section in HTML?

Develop a customized modal using jQuery library

The parameter being passed in the JSON request is empty within the WCF Service function

Showing information from the data text option

The Symfony API failed to generate a response