title: Add an addEventListner on a class remove
body: <p>I made some fandeIn and fadeOut codes to an exercise.
  I'm trying to remove the setTimeout() on the fadeIn().
  Like using an addEventListner maybe, but there is no transition on .displayNone.</p>
  <p>On the MDN I just found transitions interacting with EventListner.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fadeOut(disable) {
      disable.classList.remove('visible');
      disable.classList.add('hidden');
      disable.addEventListener('transitionend', () =&gt; disable.classList.add('displayNone'));
  };
  
  function fadein(enable, timer) {
      if (!timer) timer = 350;
      enable.classList.remove('displayNone');
      setTimeout(function () {
          enable.classList.remove('hidden');
          enable.classList.add('visible');
      }, timer);
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.displayNone {
      display: none;
  }
  
  .visible {
      visibility: visible;
      opacity: 1;
      transition: opacity 1.5s linear;
  }
  
  .hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 350ms, opacity 350ms, display 350ms linear;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>P.S.: This works good, I'm just trying another way to make it works too.</p>