title: Why is the transitionend event firing before the transition completes?
body: <p>I'm trying to design a website in which different pieces of information are held in different divs.  The user clicks a link and the current div fades until transparent and translates to the right, while the new one fades in from the left.  The idea is to call a function that adds a "fadeOut" class to the old div, add a "fadeIn" class to the new one, and then remove the extra classes from the old div so that it can start over.  It can only remove the extra classes from the old div after all the transitions are finished, of the old div will disappear rather than fading out.  I tried to accomplish this using a transitionend listener, but it seems that the transitionend function is running immediately when I create it, rather than after the transition actually ends.</p>
  
  <p>I made a JSFiddle with the core of the problematic code at <a href="http://jsfiddle.net/mmmm_cake/Q78pz/4/" rel="noreferrer">http://jsfiddle.net/mmmm_cake/Q78pz/4/</a>, and I'm copying it here:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          .page {
              position:fixed;
              margin-left:15%;
              margin-right:15%;
              top:40px;
              left:-20px;
              opacity:0
          }
          .page.fadeIn {
              transition:0.5s;
              opacity:1;
              left:0px
          }
          .page.fadeOut {
              transition:0.5s;
              opacity:0;
              left:20px;
          }
      &lt;/style&gt;
      &lt;script&gt;
          var active = 'about';
  
          function reset(page) {
              page.classList.remove('fadeOut');
              page.classList.remove('fadeIn');
          }
  
          function show(id) {
              page = document.getElementById(id);
              page.classList.add('fadeIn');
          }
  
          function hide(id) {
              page = document.getElementById(id);
              page.addEventListener('transitionend', reset(page), false);
              page.classList.add('fadeOut');
              page.removeEventListener('transitionend', reset(page), false);
          }
  
          function switchTo(id) {
              hide(active);
              show(id);
              active = id;
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="show(active)"&gt;
      &lt;div id="navbar"&gt;
          &lt;a href="javascript:switchTo('about')"&gt;About&lt;/a&gt;
          &lt;a href="javascript:switchTo('contact')"&gt;Contact Us&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="about" class="page"&gt;
          &lt;h3&gt;
              About Us
          &lt;/h3&gt;
          &lt;p&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="contact" class="page"&gt;
          &lt;h3&gt;
              Contact Form
          &lt;/h3&gt;
          &lt;p&gt;
              Nulla quis commodo arcu. Etiam facilisis risus nulla, vel tempus arcu ultricies eu.
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've tried tweaking it many different ways, and as far as I can tell, it all comes down to the transitionend event not firing properly.  I've seen lots of people saying that it doesn't fire at all for them, but anyone know how to fix it when it fires too soon?</p>