title: CSS Transition works when adding class, but not removing it
body: <p>First off, just wanted to mention that I have read this thread:</p>
  
  <p><a href="https://stackoverflow.com/questions/16646233/css3-transition-only-when-class-is-added-not-when-removed">CSS3 transition only when class is added, not when removed</a></p>
  
  <p>and the solution there does not work for me. I have a nav that is hidden when the browser is within the small breakpoint, and is revealed when an element is clicked. Clicking the element adds a class via jQuery. Once open, there is a close button that when clicked removes the class. The class is adding and subtracting as expected, but for some reason the transition only works when the .open class is added, not when it's removed. Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu-main-nav-container"&gt;
      &lt;ul id="menu-main-nav" class="menu"&gt;
          &lt;li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"&gt;&lt;a href="http://blackandwright.com/what-we-do"&gt;What We Do&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"&gt;&lt;a href="http://blackandwright.com/team"&gt;Team&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"&gt;&lt;a href="http://blackandwright.com/case-studies"&gt;Case Studies&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"&gt;&lt;a href="http://blackandwright.com/what-next"&gt;What Next?&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-104"&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122"&gt;&lt;a href="#close"&gt;Close&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (Compass + Sass):</p>
  
  <pre><code>#menu-main-nav {
      @include single-transition(opacity, 0.3s, ease-in-out);
  
      opacity: 0;
      position: absolute;
      top: -27px;
      left: 0px;
      height: 0;
      overflow: hidden;
      z-index: 5000;
  
      &amp;.open {
          opacity: 1;
          height: auto;
      }
  }
  </code></pre>
  
  <p>CSS (Compiled):</p>
  
  <pre><code>#header #menu-main-nav {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    position: absolute;
    top: -27px;
    left: 0px;
    height: 0;
    overflow: hidden;
    z-index: 5000;
  } 
  #header #menu-main-nav.open {
    opacity: 1;
    height: auto;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('body').on('click', '.menu-main-nav-container', function(e) {
          if(!$mobileNav.hasClass('open')) {
              $mobileNav.addClass('open');
          }
      }).on('click', '.nav-close', function(e) {
          if($mobileNav.hasClass('open')) {
              $mobileNav.removeClass('open');
          }
      })
  });
  </code></pre>
  
  <p>I'm pretty stumped here. Keep in mind that I am using Compass and that the initial transition is working as expected.</p>