使用AngularJS和ng-animate在列表中移动项目的好方法是什么？

Question

我希望能够重新排序列表,现在我在每个项目上都有按钮,可以在列表中上下移动它们.我想用它ng-animate来使项目顺利移动,但我只能找到-move动画,而这显然只适用于两个切换位置的顶部元素.我无法让它看起来正确.这是我到目前为止所做的:小提琴

.person-move {
    transition: all 0.5s;
    position: relative;
    height: 0;
}

.person-move.person-move-active {
    height: 26px;
    overflow: hidden;
}

我想我不确定的目的是什么-move.我正在交换两个人的位置,但它似乎只影响最高的一个.我希望它看起来像是被交换了.在示例小提琴中有一个复选框来创建新对象而不是将现有对象移动到fire -enter和-leave,也许我可以将这两种方法结合起来:

1. 使用-move用于顶部人(谁使用为低于),向上动画相对位置
2. -enter通过创建一个新对象,动画相对位置来使用底层人物

有更简单或更好的方法吗？

其他想法:像jquery-ui的拖放会很好,但我不想要包含它并找出我是否可以使用AngularJS.

Answer 1

经过大量的搞乱之后,我按照我想要的方式使用CSS下一个兄弟选择器,+:( 小提琴)

.person-move {
    position: relative;
    top: 26px;
}

.person-move.person-move-active {
    transition: all 0.5s ease;
    top: 0;
}

.person-move + div {
    /* cannot have transition on this element */
    /*transition: all 1s ease;*/
    position: relative;
    top: -26px;
}

.person-move.person-move-active + div {
    transition: all 0.5s ease;
    position: relative;
    top: 0;
}

关键是只在活动类选择器上设置过渡样式.我在yearofmoo上看到的例子将它们放在基类上,我看不出任何理由,因为那些仅仅是为我设想的动画设置初始条件.Chrome无论如何都不喜欢它,并在使用兄弟选择器时尝试设置动画到初始条件.