2

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

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

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

我想我不确定-move. 我正在交换两个人的位置，但它似乎只影响顶部的一个。我希望它看起来像他们正在被交换。在示例小提琴中有一个复选框来创建新对象而不是移动现有对象来触发 -enter 和 -leave，也许我可以结合这两种方法：

  1. 用于-move最上面的人（以前在下面），动画相对位置向上
  2. 通过-enter创建一个新对象，为相对位置设置动画，用于最底层的人

有没有更简单或更好的方法来做到这一点？

其他想法：像 jquery-ui 的拖放功能会很好，但我不想包含它并找出是否可以让它与 AngularJS 一起使用。

4

1 回答 1

8

经过一番折腾后，我使用 CSS 下一个兄弟选择器让它按照我想要的方式工作，+:( Fiddle )

.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 无论如何都不喜欢它，并在使用兄弟选择器时尝试将动画设置为初始条件。

于 2013-05-28T07:55:54.877 回答