Какой хороший способ перемещать элементы в списке с помощью 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. Я меняю местами двух человек, но, похоже, это касается только верхнего. Я хотел бы, чтобы это выглядело так, как будто они меняются местами. в образце скрипта есть флажок для создания новых объектов вместо перемещения существующих для запуска -enter и -leave, возможно, я мог бы объединить два метода:

  1. используйте -move для верхнего человека (который раньше был внизу), анимируя относительное положение вверх
  2. используйте -enter для нижнего человека, создав новый объект, анимируя относительное положение

Есть ли более простой или лучший способ сделать это?

Другие мысли. Что-то вроде перетаскивания jquery-ui было бы неплохо, но я не хочу включать его и выяснять, смогу ли я заставить его работать с AngularJS.


angularjs ng-animate
person Jason Goemaat    schedule 28.05.2013    source источник

Ответы (1)


arrow_upward
8
arrow_downward

После долгих возни я заставил его работать так, как хотел, используя 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 иметь их в базовых классах, для чего я не вижу причин, поскольку они предназначены исключительно для установки начальных условий для анимации, как я полагаю. Хрому это все равно не нравится, и он пытается анимировать исходное состояние при использовании родственного селектора.

person Jason Goemaat    schedule 28.05.2013