title: My CSS transition works in only one direction
body: <p>I have an animation to shrink my navbar, but it only works on shrink, and not when <code>.shrink</code> is removed via jQuery; it gets bigger immediately without any animation. Why?</p>
  
  <p>If I change <code>min-height</code> to <code>height</code> in both my <code>.navbar</code> and my <code>.navbar.shrink</code> selectors, it will work. But I need to use <code>min-height</code>.</p>
  
  <p>CSS LESS:</p>
  
  <pre><code>.navbar{
    min-height: 128px;
    -webkit-transition:  1s;
    -moz-transition: 1s;
    transition: 1s;
   }
  
  .navbar.shrink{
    min-height: 64px;
    -webkit-transition:  1s;
    -moz-transition: 1s;
    transition: 1s;
   }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function(){
   var shrinkHeader = 300;
    $(window).scroll(function() {
      var scroll = getCurrentScroll();
        if ( scroll &gt;= shrinkHeader ) {
             $('.header').addClass('shrink');
          }
          else {
              $('.header').removeClass('shrink');
          }
    });
  function getCurrentScroll() {
      return window.pageYOffset || document.documentElement.scrollTop;
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;h1&gt;AnimateFixed Header (Scroll Down)&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;/div&gt;
  
  &lt;script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>