Блог

Главная - Вопросы по программированию - Как получить текст из .innerHTML для постепенного ввода и исчезновения при его изменении

Как получить текст из .innerHTML для постепенного ввода и исчезновения при его изменении

#javascript #html #css #transition

#javascript #HTML #css #переход

Вопрос:

У меня есть скрипт, который просто изменяет текст на моей HTML-странице. Это текст «отзывов», который должен меняться каждые 8 секунд. Сам скрипт работает нормально, но я не могу заставить текст затухать при его повторном изменении. Вы можете видеть из моего кода, что я могу заставить его постепенно затухать, но это происходит только в самый первый раз, который на самом деле жестко запрограммирован в коде.

Я видел сообщения людей о том, как изменяться при наведении курсора мыши на что-либо, но не тогда, когда это текст, изменяемый из скрипта.

Заранее спасибо за помощь новичку! 🙂

     const testimonials = [
      {
        name: "Robert - Louisville, KY",
        quote:
          '"I'm not one to do readings but I actualy enjoyed the experience. Learning about the past, present, and future of my career was not only entertaining but insightful."',
      },
      {
        name: "Tyler - Louisville, KY",
        quote:
          '"It helped me gain some closure and realize that I can't just sit here and let life work itself out. I have to take my own initiative."',
      },
      {
        name: "Jason amp; Joey - Tampa, FL",
        quote:
          '"Kevin’s reading was spot-on! We went into it just for fun, without any expectations, and found ourselves nodding in agreement with everything he said. He was thorough in his explanations and made sure we understood exactly what the cards meant. We highly recommend a reading by Kevin."',
      },
    ];
    
    let counter = 0;
    const testimonialQuote = document.getElementById("newQuote");
    const testimonialName = document.getElementById("newName");
    const changeTime = setInterval(newTestimonial, 8000);
    
    function newTestimonial() {
      console.log("Starting function");
      testimonialQuote.innerHTML = Object.values(testimonials[counter])[1];
      testimonialName.innerHTML = Object.values(testimonials[counter])[0];
      counter  ;
      if (counter >= testimonials.length) {
        counter = 0;
      }
    }  
     .quote-name-container {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      animation: fadeIn 1s ease-in;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .testimonial-container #newQuote {
      font-size: 1.6rem;
      line-height: 2.2rem;
      margin-top: 1rem;
      text-align: center;
    }
    
    .testimonial-container #newName {
      font-size: 1.6rem;
      line-height: 2.2rem;
      margin-top: 1rem;
      text-align: center;
    }  
     <div class="testimonial-container">
            <h2 class="testimonial-header">Testimonials</h2>
            <div class="quote-name-container">
              <div id="newQuote">
                <!-- This is where the quote for the testimonial will go -->
                <p>"I'm not one to do readings but I actualy enjoyed the experience. Learning about the past, present, and future of my career was not only entertaining but insightful."'</p>
                <p>Robert - Louisville, KY</p>
              </div>
              <div id="newName">
                <!-- This is where the name for the quote will go -->
              </div>
              <script src="changetestimonial.js"></script>
            </div>
          </div>

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

1. Для этого вам не следует использовать анимацию CSS, потому что она выполняется в контейнере цитаты только один раз. Вы могли бы сделать его постепенным, но это не было бы синхронизировано с изменением цитаты. Вместо этого вам следует настроить CSS-переход на opacity , а затем в JavaScript изменять непрозрачность каждый раз, когда вы меняете цитату.

2. Спасибо. Все, что я нахожу в CSS transitions (даже просматривая MDN), продолжает показывать, как это делать с помощью:hover. Я не хочу изменять непрозрачность только с 0 на 1 и обратно на 0 при наведении курсора мыши. Я хочу, чтобы он мог делать это самостоятельно, пока следующий элемент не будет отправлен из JavaScript. Затем это должно повториться. Я вижу, что в JavaScript я могу установить непрозрачность с помощью .style.opacity = 1; но если я начинаю непрозрачность с 0, это ничего не делает, когда оно отправляется обратно. Где-нибудь еще вы можете указать мне посмотреть документацию об этом?