title: Trigger CSS animation fade-in & fade-out with JavaScript - only works in one direction?
body: <p>I am trying to build a menu that fades in and out on click. This is the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="trigger"&gt;CLICK&lt;/div&gt;
  
  &lt;ul data-status="shown" id="navi"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@keyframes fade {
      0% { opacity: 0; }
      100% { opacity: 1; display: block; }
  }
  
  ul {
    background: grey;
  }
  
  ul[data-status="shown"] {
     opacity: 1;
     animation: fade 2s;
  }
  
  ul[data-status="hidden"] {
      opacity: 0;
      animation: fade 2s;
      animation-direction: reverse;
  }
  
  ul[data-status="removed"] {
      display: none;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function myMenu () {
      var trigger = document.getElementById( 'trigger' ),
          menu = document.getElementById( 'navi' ),
          state = menu.getAttribute( 'data-status' );
  
      if ( state == 'shown' ) {
          menu.removeAttribute( 'data-status' );
          menu.setAttribute( 'data-status', 'removed' );
          state = menu.getAttribute( 'data-status' );
      }
  
      var toggle = function () {
          if ( state == 'shown' ) {
              menu.removeAttribute( 'data-status' );
              menu.setAttribute( 'data-status', 'hidden' );
              setTimeout( function() {
                  menu.removeAttribute( 'data-status' );
                  menu.setAttribute( 'data-status', 'removed' );
                  state = menu.getAttribute( 'data-status' );
              }, 2000 );
          }
  
          if ( state == 'removed' ) {
              menu.removeAttribute( 'data-status' );
              menu.setAttribute( 'data-status', 'shown' );
              state = menu.getAttribute( 'data-status' );
          }
      };
  
      trigger.addEventListener( 'click', toggle, false );
  
  }
  
  myMenu();
  </code></pre>
  
  <p>Example: <a href="http://jsbin.com/avUWUnO/1/edit" rel="nofollow">http://jsbin.com/avUWUnO/1/edit</a></p>
  
  <p>The fade-in works as expected, but the fade out is actually not present, the menu just disappears. Or maybe is this because I am clicking too fast? Then there is some strange delay in there, the error is probably where I use <code>setTimeout</code>, but I can't spot what's wrong there.  </p>
  
  <p>The status is set to hidden, the CSS animation fires, and two seconds later when the animation is finished, the menu is removed. Why is this not working as expected?</p>