fade-out text, replace text, then fade-in again [reactjs]-CodePudding

I have a list of p tags, and I want to cycle through this list, by fading in one p tag, then fading out, then again fading in after replacing it.

Here is this codepen in jQuery: https://codepen.io/motion333/pen/EBBGVM

I am trying to do this in React by this:

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();

          })();
}, []);

And this is the conainer:

<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>

But it gives me this error:

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

CodePudding user response：

this should do it.

const { useState, useEffect } = React

const Test = () => {
  const [show, setShow] = useState(0);
  
  useEffect(() => {
    const timerId = setInterval(() => {
      setShow(p => {
        if(p === 4) p = -0.5;
        else p = p   0.5;
        return p;
      });
    }, 2000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    <p style={{ opacity: `${show === 0 ? 1 : 0}` }}>Your Business</p>
    <p style={{ opacity: `${show === 1 ? 1 : 0}` }}>Your Brand</p>
    <p style={{ opacity: `${show === 2 ? 1 : 0}` }}>Your Content</p>
    <p style={{ opacity: `${show === 3 ? 1 : 0}` }}>Your Portfolio</p>
    <p style={{ opacity: `${show === 4 ? 1 : 0}` }}>You.</p>
</div>
}

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

.pContainer {
  position: relative;
}

.pContainer p {
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}

<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>