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

时间:2013-05-28 07:04:24

标签: angularjs ng-animate

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

.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. 通过创建新对象,动画相对位置
  3. ,将-enter用于底层人物

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

    其他想法: 类似于jquery-ui的拖放会很不错,但我不想要包含它并找出我是否可以使用AngularJS。

1 个答案:

答案 0 :(得分:8)

经过大量的讨论之后,我按照我想要的方式使用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; }

{{1}}

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