Fadeout list items using css transition

by jorgeluis

HTML

<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
    <div class="notification"></div>
    <div class="notification"></div>
    <div class="notification"></div>
    <div class="notification"></div>
</div>

CSS

.notifications {
    left: 0px;
    top: 0px;
    width: 400px;
    height: 300px;
    position: relative;
    border: solid 1px green;
    padding-top: 40px;
    
}

.notifications:empty {
    padding-top: 0px;
}

.notification {
    height: 40px;
    background: lightblue;
    margin: 2px;
    
}
.animate {
    height: 0;
    transition: height 1s;
}
.notification:first-child {
    margin-top: -38px;
}

JavaScript

$('#delete').click(function (e) {
	$(".notification:first-child").addClass('animate');
});

$('#add').click(function (e) {
  $(".notifications").append("<div class='notification'></div>");
});

$('.notification').on('transitionend', function(e){
  $(e.target).remove()
});