如何在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中为日志流设置动画效果

回答

相关问题