使用ES6和CSS3淡入和淡出

Question

所以我有一个函数，我试图通过数组创建循环，以使用JavaScript更新div的innerHTML。我希望将不透明度设置为0，然后在每次设置新数据之间将其设置为1，而不使用jQuery的fadeIn（）和fadeOut（）。

这是我到目前为止所拥有的。我想我已经很近了，但是不确定我在做什么，那会有点偏离。

谢谢！

 slide(index, tweets, element) {
    let self = this;

    element.innerHTML = data[index].text;
    element.style.opacity = 1;

    setTimeout(() => {
        index++;
        element.style.opacity = 0;
        setTimeout(self.slide(index, data, element), 2000);
    }, 5000);
}

编辑 我忘了提到我通过将类添加到我的div来改变动画，从而将CSS3用于动画：

transition: opacity 2s ease-in-out;

Answer 1

我不知道您提供的代码与当前问题有何关系，但是这里有一个有关如何淡出，更改文本然后再淡入的简单演示。

您应该可以根据需要扩展此功能。

var d = document.querySelector("div");

window.addEventListener("load", function() {
  d.classList.add("hidden");
});

var i = 0;

d.addEventListener("transitionend", function() {
  if (this.classList.contains("hidden")) {
    i++;
    this.innerHTML = "SUCCESS! ---> " + i;
  }
  this.classList.toggle("hidden");
});

div {
  opacity: 1;
  transition: opacity 2s;
}

div.hidden {
  opacity: 0;
}

<div>LOADING...</div>

它只是添加了hidden触发淡出的类，并绑定了transitionend处理程序以更改文本并删除了淡入的类。