Attenuation and exit with ES6 and CSS3

Question

So, I have a function that I am trying to create loops through an array to update the innerHTML div using JavaScript. I was hoping to set opacity to 0 and then 1 between setting new data every time without using jQuery fadeIn () and fadeOut ().

Here is what I still have. I think I'm very close, but not sure if I am doing this a bit.

Thanks!

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

EDIT I forgot to mention that I use CSS3 for animation, adding a class to my div that changes with this:

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>

Hide result

hidden, , transitionend, .