Prepending an element with $animate.enter()

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-animate.min.js"></script>
    Insert <input type="text" id="input" />
    <button class="add" type="button">Go</button>

<ul id="Trees">
    <li id="Ash">Ash</li>
    <li id="Beech">Beech</li>
    <li id="Cedar">Cedar</li>
    <li id="Dogwood">Dogwood</li>
</ul>

CSS

body {
    font-family: sans-serif;
}

input {
    border:1px solid #ccc;
    padding:10px;
    color:#444;
    font-size:15px;
}
.add {
    background: #777;
    color: #fff;
    border:none;
    font-size:15px;
    padding:10px;
}

form, li {
    border: 1px solid;
    margin: 1em 0;
    padding: 0.5em;
}

.comefromtop {
    animation: comefromtop 0.5s;
}
.pushdown {
    animation: pushdown 0.5s;
}

@-webkit-keyframes comefromtop {
  0%   { opacity:0; -webkit-transform: translateY(-100%); }
  100% { opacity:1; -webkit-transform: translateY(0px);   }
}

@-webkit-keyframes pushdown {
  0%   { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
  100% { /*opacity:1;*/ -webkit-transform: translateY(0);   }
}



form {
    background-color: #e0e0e0;
    border-color: #ccc;
    padding: 0.5em;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    background-color: #ffd;
    border-color: #cca;
}

li.new {
    background-color: #6f9;
    border-color: #3c6;
}

li.new.ng-enter {
    opacity: 0;
    transition: opacity 1.5s;
}

li.new.ng-enter-active {
    opacity: 1;
}

JavaScript

function add() {
    var val = $('#input').val();
	var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val);    		$('#Trees').prepend(item).addClass('pushdown');
	setTimeout(function () {
    	$('#Trees').removeClass('pushdown');
	}, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
    if (e.keyCode === 13) {
        add();
    }
});