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

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

您应该可以根据自己的需要进行扩展。

＆＃13;

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

＆＃13;

div {
  opacity: 1;
  transition: opacity 2s;
}

div.hidden {
  opacity: 0;
}

＆＃13;

<div>LOADING...</div>

＆＃13;

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

使用ES6和CSS3淡入淡出

1 个答案: