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

与上面的版本不同，如果在CSS中进行更改，则需要在JS中手动编辑动画持续时间。但它删除了很多代码：

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");

虽然这并不是你想要的工作方式，但过渡效果正在被应用。