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

【问题标题】：fade-out text, replace text, then fade-in again [reactjs]淡出文本，替换文本，然后再次淡入 [reactjs]
【发布时间】：2023-01-09 11:40:06
【问题描述】：

我有一个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

【问题讨论】：

fadeIn 是一个 jQuery 方法，但您在这里处理的不是 jQuery 对象，而是普通的 HTMLElement 对象。
是的，我已经意识到了。 JS 中淡入淡出方法的实际等价物是什么？
没有本地等价物。您要么必须自己实施它们，要么去检查 React 可能明确提供哪些替代方案（？）。
无法做到:(

标签： javascript jquery css reactjs

【解决方案1】：

这应该做到。

const { useState, useEffect } = React;

const time_between_text = 2; // text show for 2s before fade out.

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;
      });
    }, time_between_text * 1000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    <p style={{ opacity: `${show === 0 ? 1 : 0}`, transitionDuration: `${time_between_text + 0.5}s` }}>Your Business</p>
    <p style={{ opacity: `${show === 1 ? 1 : 0}`, transitionDuration: `${time_between_text + 0.5}s` }}>Your Brand</p>
    <p style={{ opacity: `${show === 2 ? 1 : 0}`, transitionDuration: `${time_between_text + 0.5}s` }}>Your Content</p>
    <p style={{ opacity: `${show === 3 ? 1 : 0}`, transitionDuration: `${time_between_text + 0.5}s` }}>Your Portfolio</p>
    <p style={{ opacity: `${show === 4 ? 1 : 0}`, transitionDuration: `${time_between_text + 0.5}s` }}>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-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>

【讨论】：