动画多个列表折叠成一个

Question

我在一个页面上有多个列表。可能存在的列表数量是任意的，但可能会限制为 10 个。

此页面有两种视图：

• 模式 1： 所有项目都分类并列在不同的通道中。
• 模式 2： 所有项目都折叠到一个列表中。

用户应该能够在两种模式之间切换。我有这个 [大致] 工作 - 它们被折叠成一个列表，但它们从父/源列表中丢失了样式。

理想情况下，我希望两种模式之间的过渡具有动画效果；也就是说，当用户单击模式切换按钮时，每个车道的所有列表项都会动画/折叠成一个按字母顺序排列的单个列表。进入模式 2（单列表模式）后，再次单击切换按钮，理想情况下会将列表项重新设置为原始列表。

Here's a Fiddle I've been working on.

在我的代码中，我有四个列表，其中包含一个隐藏的 <ul>，项目可以折叠到其中。我无法弄清楚动画的播放方式和位置。

$(function() {
    $("button").on("click", function() {
        if($(this).text() == "Mode 1") {
            $("#list").show();
            $("li").remove().clone().appendTo("#list");
            $("ul:not(#list)").hide();
            $("button").text("Mode 2");
        }
    });
});

---

<button>Mode 1</button>

// The hidden list
<ul id="list"></ul>

<ul id="red">
    <li>A</li>
    ...
</ul>
<ul id="blue">
    <li>K</li>
    ...
</ul>
<ul id="gray">
    <li>U</li>
    ...
</ul>
<ul id="green">
    <li>AA</li>
    ...
</ul>

编辑：我想我应该指定我的目标动画。我希望每个单独的列表项从其原始位置“飞”到单个折叠列表中。

Answer 1

好的，Jon，对于每个要从当前位置动画到新位置的片段，您已经获取了每个元素的偏移量，将它们设为 position:absolute;，然后将它们动画到正确的位置。

In-progress fiddle here

这是伴随它的 jQuery。这也使您的 HTML 布局保持不变：

$(function() {
$("button").on("click", function() {
    if($(this).text() == "Mode 1") {
        var elem = $('ul:not(#list) > li'),
            elemH = elem.first().outerHeight(),
            list1Last = {x:$('#red > li:last-of-type').offset().left,
                         y:$('#red > li:last-of-type').offset().top},
            oElem = {x:0, y:0, w:0, h:0}
        $('ul:not(#red)').each(function(e){
            $(this).find('li').each(function(i){
                oElem = {x:$(this).offset().left,
                         y:$(this).offset().top,
                         w:$('#red').width(),
                         h:$(this).outerHeight()}
                console.log(oElem.x, oElem.y);
                $(this).css({"position":"absolute", 
                             "top":oElem.y+(oElem.h*i)+"px",
                             "left":oElem.x+"px",
                             "width":oElem.w+"px"});
                $(this).delay(200*i).animate({"top":(list1Last.y+elemH)*e+(i*elemH)+"px",
                                              "left":list1Last.x+"px"}, 200);
            });
        })
    } else {

    }
});
});

它的作用是使用offset() 获取每个元素的当前位置，然后我更改CSS 使它们成为position:absolute; 并给它们一个left 和top 值。这无缝地使它们绝对定位，没有任何碰撞。然后马上，我将它们动画到它们的新位置，就像你说的它们在飞行一样。有办法让它们一只一只飞起来，但这需要更多的编辑。