Блог

Главная - Вопросы по программированию - Как отображать новый текст при каждом мигании с помощью CSS

Как отображать новый текст при каждом мигании с помощью CSS

#javascript #html #css #reactjs #frontend

Вопрос:

Я хочу отображать комментарии пользователей один за другим в моем HTML-коде React при каждом мигании.

В настоящее время они отображаются в формате списка, но я хочу отображать их по одному за раз и отображать после каждого мигания

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

Комментарии:

1. Можете ли вы добавить логику для мигания?

Ответ №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 amp;amp; (
    <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>

Комментарии:

1. Я сделал то же самое. Теперь содержимое динамично, как я и хотел, но мигание происходит только тогда, когда оно отображается в первый раз.. Хорошо, если вы скажете, что я должен сделать, чтобы он мигал для каждого рендеринга

2. динамический контент ? пожалуйста, объясните подробнее

Метки: