时间戳

首页 > 解决方案 > 如何使用 CSS 在每次闪烁时显示新文本

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

问题描述

我想在每次闪烁时在我的 React HTML 中一一显示用户评论。

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

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

标签： javascripthtmlcssreactjsfrontend

解决方案

  • 为什么要使用 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>

推荐阅读