Пример Angularjs ng-animate move?

Кажется, я не могу получить angularjs ng-animate при переходе на работу, и там также нет никаких примеров в дикой природе. Возьмем, к примеру, демонстрационную скрипку: http://jsfiddle.net/yfajy/

Добавление команд перемещения в css, как показано ниже, не создает никакого эффекта анимации при фильтрации списка:

.example-repeat-move-setup {  opacity:1;
  color:red }
.example-repeat-move-setup.example-repeat-move-start {   opacity:1;
  color:black;}

Может ли кто-нибудь опубликовать рабочий пример?

Ответы

Ответ 1

Я начал работать с некоторыми беспорядками и использовал следующий селектор css для сериализации + (скрипка). По-видимому, анимация move применяется ко всем элементам между первым перемещенным элементом и последним измененным элементом, но не последним измененным элементом.

Вы можете видеть в эту скрипту, где я меняю места на два человека на 4 пробела, чтобы анимация перемещения применялась к элементам 0, 1, 2 и 3, но не 4, хотя я только поменял элементы 0 и 4. Следующий селектор смежных функций переопределяет значения, установленные как для элементов 1, 2, так и для 3, и является единственным стилем, применяемым к 4.

В эта скрипка вы действительно можете ее увидеть, есть кнопка, которая заменяет шестой элемент третьим и помещает новых людей в 1-й и 3-й, 1-й и 3-й получают анимацию ввода, в то время как 4-й и 5-й получают анимацию перемещения, а 6-й ничего не получает, хотя 6-я позиция - единственная с перемещенным человеком в ней.

Ответ 3

В документации :

  • введите - когда новый элемент добавлен в список или когда элемент после фильтра
  • оставить - когда элемент удален из списка или когда элемент отфильтровывается
  • move - когда смежный элемент отфильтровывается, вызывая переупорядочение или когда содержимое элемента заказана

Таким образом, фильтрация входящих и исходящих элементов приведет к активации анимации ввода и выхода, а не анимации перемещения.

Чтобы вызвать анимацию перемещения, вам необходимо вызвать порядок элементов, как в этом примере jsfiddle:

$scope.shuffle = function() {
    $scope.friends = _($scope.friends).shuffle();
}

Вы также можете узнать более подробное объяснение в ngAnimate:

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery