Скрыть и затем показать текст, используя Javascript - непрозрачность перехода

Question

Я хочу, чтобы мои 5 текстов исчезали при использовании перехода, а затем появлялись при повторном использовании перехода, как небольшая анимация.

Мой фрагмент можно посмотреть здесь: https://codepen.io/makiwara/pen/abOVKBP

или здесь:

<h1>text1</h1>

h1{
  opacity: 1;
}

.hide {
  opacity: 0;
  transition: opacity 1000ms;
}

let i=0;
setInterval(function(){

var myArray = [
  "text1",
  "text2",
   "text3",
   "text4",
   "text5"
]

i=i+1;
if (i>4){
    i=0;
}

let name = myArray[i];
document.querySelector("h1").innerText=name;
document.querySelector("h1").classList.add="hide";
},3000);

И это фрагмент, где я вижу решение, однако, как бы я ни старался, я просто не могу реализовать это: https://codepen.io/zvona/pen/LVxxjM

Большое спасибо, если у вас есть идеи! Теперь я чувствую себя безнадежно! Хорошего дня!

Answer 1

Вы можете сделать что-то вроде этого:

Версия 1: использовать transitionend событие

const myArray = [
        "text1",
        "text2",
        "text3",
        "text4",
        "text5"
      ],
     container = document.querySelector("h1"),
     transitionEndEvent = whichTransitionEvent();
let i = 0;

(function loop() {
  // Add the "hide" class
  setTimeout(()=> container.classList.add('hide'), 0);
  // Wait for the animation to end
  addEventListenerOnce(container, transitionEndEvent, () => {
    // Change the text
    container.innerHTML = myArray[i];
    // Remove the class
    container.classList.remove('hide');
    // Wait for the animation to end
    addEventListenerOnce(container, transitionEndEvent, () => {
      i = ++i % myArray.length;
      // Show the text for 1 second and continue
      setTimeout(loop, 1000);
    });
  });
})();

// Just a utility function to trigger an event handler once
function addEventListenerOnce(el, eventName, callback) {
  el.addEventListener(eventName, handler);
  function handler() {
    el.removeEventListener(eventName, handler);
    callback.call(el);
  }
}

// The name of the event depends on the browser
function whichTransitionEvent(){
  var t, el = document.createElement("fakeelement");

  var transitions = {
    "animation"      : "transitionend",
    "OAnimation"     : "oTransitionEnd",
    "MozAnimation"   : "transitionend",
    "WebkitAnimation": "webkitTransitionEnd"
  }

  for (t in transitions){
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

h1{
  opacity: 1;
  transition: opacity 300ms;
}

.hide {
  opacity: 0;
}

<h1></h1>

О функции whichTransitionEvent

Браузеры имеют разные имена для transitionend событие . Эта служебная функция выберет правильную для текущего браузера. Я нашел вдохновение для этого здесь .

О функции loop

Как вы можете видеть, эта функция заключена в (function loop() {...})();. Это называется IIFE (выражение для немедленного вызова функции) . Мы вызываем функцию, как мы ее объявляем. В этом случае он также будет вызывать себя рекурсивно.

О строке i = ++i % myArray.length;

Здесь мы используем оператор по модулю сделать вещи короче. Но это эквивалентно следующему:

i++;
if (i >= myArray.length) { i = 0; }

Версия 2: использование setTimeout

В отличие от вышеприведенной версии, вам придется вручную редактировать продолжительность анимации в JS, если вы измените его в CSS. Но это удаляет много кода:

const myArray = [
        "text1",
        "text2",
        "text3",
        "text4",
        "text5"
      ],
     container = document.querySelector("h1"),
     animationDuration = 300; // in milliseconds
let i = 0;

(function loop() {
  // Add the "hide" class
  container.classList.add('hide');
  // Wait for the animation to end
  setTimeout(function() {
    // Change the text
    container.innerHTML = myArray[i];
    // Remove the class
    container.classList.remove('hide');
    // Wait for the animation to end
    setTimeout(function() {
      i = ++i % myArray.length;
      // Show the text for 1 second and continue
      setTimeout(loop, 1000);
    }, animationDuration);
  }, animationDuration);
})();

h1{
  opacity: 1;
  transition: opacity 300ms;
}

.hide {
  opacity: 0;
}

<h1></h1>

Answer 2

Ваш способ добавления класса в список классов неправильный.

Замените его следующей строкой кода:

document.querySelector("h1").classList.add("hide");

Хотя это не совсем то, как вы хотите, чтобы это работало, но применяется эффект перехода.