Edit in JSFiddle

$(function() {
    $(document.body).on("click", ".delete", function (evt) {
        evt.preventDefault();
        $(this).closest("li").remove();
    });
    
    $(".append").click(function () {
        $("<li>New item</li>").insertAfter($(".items").children()[2]);
    });

    // Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
    $(".items").on("webkitTransitionEnd", function () {
        $(this).hide().offset();
        $(this).show();
    });
});

<ul class="items">
    <li>Monday <a href="#" class="delete">delete</a></li>
    <li>Tuesday <a href="#" class="delete">delete</a></li>
    <li>Wednesday <a href="#" class="delete">delete</a></li>
    <li>Thursday <a href="#" class="delete">delete</a></li>
    <li>Friday <a href="#" class="delete">delete</a></li>
    <li>Saturday <a href="#" class="delete">delete</a></li>
    <li>Sunday <a href="#" class="delete">delete</a></li>
</ul>
<button class="append">Add item</button>

<!--[if lte IE 9]><style type="text/css">
    /* Old IE doesn't support CSS transform or transitions */
    .items li { position: relative }
</style><![endif]-->

body { font-family: Arial; overflow: hidden; }
.items { 
    list-style-type: none; padding: 0; position: relative;
    border: 1px solid black; height: 390px; overflow-y: auto; overflow-x: hidden;
    width: 200px;
}
.items li { 
    height: 50px; width: 100%; line-height: 50px; padding-left: 20px;
    border: 1px solid silver; background: #eee;
    position: absolute; top: 0; left: 0; 
    -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}

/* See later in the blog post for a cleaner way to generate these rules */
.items li:nth-child(1)  { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); }
.items li:nth-child(2)  { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.items li:nth-child(3)  { -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); }
.items li:nth-child(4)  { -webkit-transform: translate3d(0, 300%, 0); transform: translate3d(0, 300%, 0); }
.items li:nth-child(5)  { -webkit-transform: translate3d(0, 400%, 0); transform: translate3d(0, 400%, 0); }
.items li:nth-child(6)  { -webkit-transform: translate3d(0, 500%, 0); transform: translate3d(0, 500%, 0); }
.items li:nth-child(7)  { -webkit-transform: translate3d(0, 600%, 0); transform: translate3d(0, 600%, 0); }
.items li:nth-child(8)  { -webkit-transform: translate3d(0, 700%, 0); transform: translate3d(0, 700%, 0); }
.items li:nth-child(9)  { -webkit-transform: translate3d(0, 800%, 0); transform: translate3d(0, 800%, 0); }
.items li:nth-child(10) { -webkit-transform: translate3d(0, 900%, 0); transform: translate3d(0, 900%, 0); }
.items li:nth-child(11) { -webkit-transform: translate3d(0, 1000%, 0); transform: translate3d(0, 1000%, 0); }
.items li:nth-child(12) { -webkit-transform: translate3d(0, 1100%, 0); transform: translate3d(0, 1100%, 0); }
.items li:nth-child(13) { -webkit-transform: translate3d(0, 1200%, 0); transform: translate3d(0, 1200%, 0); }
.items li:nth-child(14) { -webkit-transform: translate3d(0, 1300%, 0); transform: translate3d(0, 1300%, 0); }
.items li:nth-child(15) { -webkit-transform: translate3d(0, 1400%, 0); transform: translate3d(0, 1400%, 0); }