淡出文本，替换文本，然后再次淡入 [reactjs]

Question

我有一个p标签列表，我想循环浏览这个列表，方法是淡入一个p标签，然后淡出，然后在替换它后再次淡入。

这是 jQuery 中的代码笔： https://codepen.io/motion333/pen/EBBGVM

我正在尝试通过以下方式在 React 中执行此操作：

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

          })();
}, []);

这是容器：

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

但它给了我这个错误：

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

Answer 1

这应该做到。

 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>