如何在javascript/css中爲日誌流設置動畫效果

-3

我的瀏覽器中有一串事件。我想將它們製作成動畫列表 - 當新事件發生時，其他項目順利地滑下一個項目，並且新項目在列表頂部淡入。如何在javascript/css中爲日誌流設置動畫效果

我寧願使用一個輕量級的動畫引擎像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

來源

2016-11-07 Anko

追加新項目並調用'slideDown（）'，也許？在沒有您向我們展示您現有的任何代碼的情況下，很難爲您提供幫助 –

我現有的代碼無法使用！我正在尋找如何完成這項技術。我嘗試了很多東西。不，附加項目和調用slideDown（）不起作用 - 這將顯示一個滑動的元素，而不是將它們全部翻譯並淡入新的。 – Anko

感謝您添加樣本。作爲參考，我們需要查看您的破解代碼，以便我們可以看到您正在處理的上下文。我爲您添加了一個答案。 –

爲了達到你所需要的，你可以在前面加上新的項目，然後調用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>

來源

2016-11-07 12:39:19

這只是使新元素滑入，而不是使項目在新元素中滑落。 – Anko

如何在javascript/css中爲日誌流設置動畫效果

回答

相關問題