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>");

on codepen：http://codepen.io/ankopainting/pen/KNwYxJ

Answer 1

要实现您的需求，您可以在新项目前添加，然后拨打slideDown()，如下所示：

＆＃13;

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

＆＃13;

.added-item {
  display: none;
}

＆＃13;

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

＆＃13;

如何在javascript / css中为日志流设置动画

1 个答案: