Как я могу оживить поток журнала в javascript/css

Question

У меня есть поток событий в моем браузере. Я хочу оживить их как список - когда приходит новое событие, другие элементы плавно перемещаются вниз по одному элементу, а новый исчезает в верхней части списка.

Я предпочитаю использовать легкий механизм анимации, как transit.js или velocity.js

Я попытался translateY: '1em', но вместо перемещения всех элементов вниз 1 линия, кажется, чтобы переместить их в первый раз, и последовательные звонки хранят его там.

пример кода

<ul id="container"> 
    <li>blah</li> 
    <li>yoyo</li> 
</ul> 

и JS

$("#container").children().velocity({ 
    translateY: "1em" 
}, 1000); 

$("#container").prepend("<li>yar</li>"); 

$("#container").children().velocity({ 
    translateY: "1em" 
}, 1000); 

$("#container").prepend("<li>yar</li>"); 

на codepen: http://codepen.io/ankopainting/pen/KNwYxJ

Answer 1

Чтобы достичь того, что вам нужно вы можете предварять новый элемент, а затем вызвать slideDown(), как это:

$('button').click(function() { 
 
    $('<li>foo</li>').addClass('added-item').prependTo('#container').slideDown(); 
 
});

.added-item { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="container"> 
 
    <li>blah</li> 
 
    <li>yoyo</li> 
 
</ul> 
 

 
<button>Add item</button>