2013-12-19 2 views
10

Я немного распущен, когда дело доходит до анимации ng-move в ng-repeat. Например, если я перемещаю элемент массива от 3 до 7, элементы 4-7 меняются и оживляют. Однако фактический элемент, который я переместил из 3 и помещен в позицию 7, не работает. Вот демон, демонстрирующий мою проблему.Анимация ng-move в AngularJS ngRepeat анимирует неправильные объекты

http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview

Перемещение пункт 7 до 3, однако, работает, как я ожидал, оживляющий единственный перемещенный элемент, а не элементы, которые были толкнули вниз.

Это не очень полезно для отображения пользователя, который перемещается. Как должен кто-то правильно анимировать ng-ход?

+0

Крис, любой прогресс на этом? – Birowsky

+0

Нет, извините. Я закончил поиск этой проблемы в github, но у меня не было удовлетворительного курса действий. https://github.com/angular/angular.js/issues/5160 – Chris

+0

upvote для использования (сильно недооцененный) термин «flummoxed» – drewmoore

ответ

0

Правильный синтаксис

arrayVar.splice(to, 0, arrayVar.splice(from, 1)); 

Чтобы удалить и вернуть элемент в индексе i массива arr используйте arr.splice(i, 1),

+0

Спасибо за быстрый ответ. К сожалению, это работало, потому что это вызвало ng-enter и ng-leave. Я обновил plunkr, чтобы показать анимацию по-другому. – Chris

+0

@ Крис. Я не понял. Я думаю, что мое исправление все еще работает. Вам не нужно '[0]' – zsong

+0

Вернув array.splice (i, 1), вы возвращаете массив, а не элемент. Это вызывает переход ng-leave/ng-enter, а не ng-move в AngularJS. Plunkr - это просто самый простой случай, который я мог бы сделать, чтобы проиллюстрировать, что ng-move (который фактически запускается во время сортировки в моем реальном коде) не анимирует фактический перемещаемый элемент. Я обновил plunkr, чтобы показать выход/вход/перемещение как красный/зеленый/синий. Это синяя анимация, которая является моей проблемой. Прошу прощения за путаницу. – Chris

1

@tasseKat имеет отличный ответ, который объясняет поведение вы наблюдали: https://stackoverflow.com/a/27616435/1652643

Однако его решение не так просто, как вы бы хотели ... но до сих пор я не нашел ничего лучшего.