Transition

Transition when removing class with display: none

by J0ANMM

HTML

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

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

CSS

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
}

.box{
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}

.not-updated{
    display: none;
}

JavaScript

$('#updater').click(function() {
    $('#box7').removeClass('not-updated', 3000);
});