Javascript 使用ES6和CSS3进行淡入淡出

所以我有一个函数，我试图通过数组创建循环，用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);
}

编辑 我忘了提到我正指望CSS3为动画添加一个类到我的div中，该类会随之改变：

transition: opacity 2s ease-in-out;

---

我不知道您提供的代码与手头的问题有什么关系，但这里有一个简单的演示，介绍如何淡出、更改文本，然后淡入

您应该能够根据自己的需要对此进行扩展

var d=document.querySelector（“div”）；
addEventListener（“加载”，函数（）{
d、 添加（“隐藏”）；
});
var i=0；
d、 addEventListener（“transitionend”，函数（）{
if（this.classList.contains（“hidden”））{
i++；
this.innerHTML=“SUCCESS！-->”+i；
}
this.classList.toggle（“隐藏”）；
});
div{
不透明度：1；
过渡：不透明度2s；
}
隐藏分区{
不透明度：0；
}
加载…
您不使用CSS 3的原因是什么？由于您指定了ES6，我假设您的目标是现代浏览器。我使用的是CSS3。对不起，我没有具体说明。我使用的是一个“transition:ease-in-out；”，但是我一辈子都不知道如何在设置innerHTML之前和之后触发它。我相信这个解决方案提供了比完全依赖JS超时和间隔更好的UX。回答得好！所以唯一的问题是我没有点击任何东西。这只是一个无限的循环，它会逐渐消失。不过我会尝试这样做。@eightonrose：您只需在加载时（或在任何时候）添加类来启动它，然后让
transitionend
处理程序根据需要删除或添加类。实际上，您可以使用
classList.toggle（“hidden”）
。好吧，所以我尝试了一下，出于某种原因，我的代码甚至没有命中事件侦听器transitionend’在CSS转换后是否要运行，对吗？@eightonrose:对。浏览器的开发人员控制台中有错误吗？