Transition

Transition when removing class with display: none

HTML

<div id="box1" class="box box-updated">Box1</div>
<div id="box2" class="box box-updated">Box2</div>
<div id="box3" class="box box-updated">Box3</div>
<div id="box4" class="box box-updated">Box4</div>
<div id="box5" class="box box-updated">Box5</div>
<div id="box6" class="box box-updated">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box box-updated">Box8</div>

<br>
<button id="updater">
Click me
</button>

CSS

.box {
    border: 1px solid black;
    width: 350px;
    height: 0;
    overflow: hidden;
     -webkit-transition: height 3s ease;
    -moz-transition: height 3s ease;
    -o-transition: height 3s ease;
    transition: height 3s ease;
}

.box-updated {
  height: 40px;
}

.not-updated {
    display: none;
}

JavaScript

$('#updater').click(function() {
	$('#box7').removeClass('not-updated');
  
	setTimeout(function() {
  	$('#box7').addClass('box-updated');
  }, 0);
});