title: Fading in and out with ES6 and CSS3
body: <p>So I have a function that I'm trying to create the loops through an array to update a div's innerHTML with JavaScript. I was hoping to set the opacity to 0 and then 1 between setting the new data each time, without using jQuery's fadeIn() and fadeOut().</p>
  
  <p>Here is what I have so far. I think I'm very close, but not sure what I'm doing that's slightly off.</p>
  
  <p>Thanks!</p>
  
  <pre><code> slide(index, tweets, element) {
      let self = this;
  
      element.innerHTML = data[index].text;
      element.style.opacity = 1;
  
      setTimeout(() =&gt; {
          index++;
          element.style.opacity = 0;
          setTimeout(self.slide(index, data, element), 2000);
      }, 5000);
  }
  </code></pre>
  
  <p><strong>EDIT</strong>
  I forgot to mention I'm banking on CSS3 for animation by adding a class to my div that changes with this:</p>
  
  <pre><code>transition: opacity 2s ease-in-out;
  </code></pre>