如何动画（转换）列表项从不同位置进入？

Question

我有一个按钮。当我点击按钮时，会有一个ajax调用发送到服务器。调用的结果将是多个列表项（比如4个列表项<li>）。这将附加到空（<ul>）。

我想为新的4个列表项设置动画，例如来自不同位置的内容

• 从左下角离开极端
• 从左下方离开中心
• 从右下方开始
• 右下角右下方

我想这可以使用CSS3。是否有任何特定的过渡可用于此效果？或者我们可以使用jQuery方法吗？

Answer 1

这样做的方法是使用不同的偏移量附加li（我使用不同的类），然后删除它们使它们适合放置......给它们不同的转换时间将产生预期的效果：

full code example

css代码段

ul li:nth-last-child(1) { -webkit-transition:transform 600ms ease;
    transition:transform 600ms ease;}
ul li:nth-last-child(2) { -webkit-transition:transform 500ms ease;
    transition:transform 500ms ease;}
ul li:nth-last-child(3) { -webkit-transition:transform 400ms ease;
    transition:transform 400ms ease;}
ul li:nth-last-child(4) { -webkit-transition:transform 200ms ease;
    transition:transform 200ms ease;}

li.n1 {transform:translate(-1000px, 600px);}
li.n2 {transform:translate(-500px, 600px);}
li.n3 {transform:translate(500px, 600px);}
li.n4 {transform:translate(1000px, 600px);}

JS

$(document).ready(function(){
    $("#btn").click(function(){
        $("ul").append("<li class='new n1'>New</li><li class='new n2'>New</li><li class='new n3'>New</li><li class='new n4'>New</li>");
        setTimeout(function() {
            $(".new").attr('class', '');
        },200);
    });
})

*请注意，您可能需要为FF等添加更多css前缀..