如何使用 CSS 在每次闪烁时显示新文本

Posted 2023-03-05

【中文标题】如何使用 CSS 在每次闪烁时显示新文本

【英文标题】：How to display new text on every blink using CSS

【发布时间】：2021-11-29 09:54:38

【问题描述】：

我想在每次闪烁时在我的 React html 中一个一个地显示用户 cmets。

目前它们以列表格式呈现，但我想一次呈现一个并在每次闪烁后显示下一个

<ul id="testimonials-carosel">
  <div id="quote_wrap">
    <li>
      <div className="quote_content">
        Love this theme and so impressed with the customer support!!! Has been great for someone like myself with very little experience! Absolutely Fantastic!
      </div>
      <div className="quote_author">
        <strong>Elena Doe</strong> - Public speaker, MEDIADOT
      </div>
    </li>
    <li>
      <div className="quote_content">
        Absolutely amazing! This was more than worth the purchase! Great job, and thanks for your amazing work!
      </div>
      <div className="quote_author">
        <strong>John Doe</strong> - Developer, W.T.D. Ltd
      </div>
    </li>
    <li>
      <div className="quote_content">
        Constellation is one of the most comprehensive, well-documented, well-planned projects we’ve ever seen. Cheers to great work! Lorem ipsum dolor sit amet, consectetur adipisicing
      </div>
      <div className="quote_author">
        <strong>John Doe</strong> - Designer, WESTWOOD
      </div>
    </li>
  </div>
</ul>

【问题讨论】：

可以添加blink的逻辑吗？

【参考方案1】：

为什么要使用 CSS 来做这件事？ 猜猜我们可以使用

setInterval

来以一定的间隔显示每个项目

示例：

function App() 
  const [data, setData] = React.useState(['title': "dsasdsa",'title': "fsadasdsa",'title': "jhrertgertert",'title': "vbbfdgswfds",'title': "zzfssafsdfs"]);
  const [data1, setData1] = React.useState(null);
  
  React.useEffect(() => setData1(data[0]);,[]) // to show the first item with no delay
  
  React.useEffect(() => 
    // show items from index 1 with an interval
    let index = 1;
    const interval = setInterval(() => 
      setData1(data[index]);
      index += 1;
      if (index >= data.length) 
        clearInterval(interval);
      
    , 3000);

    return () => 
      clearInterval(interval);
    ;
    
  , [data]);
  const list = data1 && (
    <ul key=data1.title>
      <li>data1.title</li>
    </ul>
  );

  return <div className="App">list</div>;


ReactDOM.render(<App/>,document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="root"></div>

【讨论】：

我也实现了。现在内容是动态的，正如我所愿，但闪烁只是在它第一次渲染时发生。如果你告诉我应该怎么做才能让它在每次渲染时闪烁

动态内容？请解释更多