My CSS transition works in only one direction

Question

I have an animation to shrink my navbar, but it only works on shrink, and not when .shrink is removed via jQuery; it gets bigger immediately without any animation. Why?

If I change min-height to height in both my .navbar and my .navbar.shrink selectors, it will work. But I need to use min-height .

CSS LESS:

.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;
 }

jQuery:

$(function(){
 var shrinkHeader = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('.header').addClass('shrink');
        }
        else {
            $('.header').removeClass('shrink');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});

HTML:

<div class="header">
  <h1>AnimateFixed Header (Scroll Down)</h1>
</div>
<div class="content">
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Answer 1

It works but you need to modify your animation accordingly

http://codepen.io/anon/pen/PwQqGJ

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    min-height: 200px;
    overflow: hidden;
    -webkit-transition: min-height 1s;
    -moz-transition: min-height 1s;
    transition: min-height 1s;
    text-align:center;

}
.header.shrink {
    min-height: 100px;
}

If you changed to use min-height then you need to make sure you are animating min-height and not height.

In case you missed it, it's transition: min-height 1s; not transition: height 1s;

Answer 2

I created a JSFiddle example:

CSS:

.navbar {
     background-color:red;
     height: 128px;
     -webkit-transition: height 0.5s, margin-top 0.5s;
     -moz-transition: height 0.5s, margin-top 0.5s;
     -o-transition: height 0.5s, margin-top 0.5s;
     transition: height 0.5s, margin-top 0.5s;
}

.navbar.shrink {
    height: 64px;
    margin-top: -33px;
}

HTML:

<div id="primary" class="navbar shrink">  Text </div>
<button id="btn">Add/remove class</button>

Javascript:

function removeAdd(){
    if($("#primary").hasClass("shrink")){
         $("#primary").removeClass("shrink");
    } else {
         $("#primary").addClass("shrink");
    }  
}
$(document).ready(function(){
    $('#btn').click(removeAdd);
});

URL: http://jsfiddle.net/67xnkkk8/1/

This works. Use height instead min-height