javascript/cssでログストリームをアニメーション化するには

Question

私のブラウザにはイベントストリームがあります。私はそれらをリストとしてアニメーション化したい - 新しいイベントが来たら、他のアイテムはスムーズに1つのアイテムを滑り落ち、新しいものはリストの一番上にフェードインする。

私はtransit.jsのような軽量のアニメーションエンジンを使用することを好むか、私はtranslateY: '1em'を試みたが、むしろダウン1行をすべての項目を移動するよりも、最初の時間を、それらを下に移動しているようだ

velocity.js、と思います連続して通話するとそこに保持されます。

のコード例

<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>