CODEWITHSUNDEEP
animationangularjs
user2354397
user2354397

Reputation: 269

Angularjs ng-animate move example?

I don't seem to be able to get angularjs ng-animate on move to work and there also don't appear to be any examples in the wild. Take for example the demo fiddle: http://jsfiddle.net/yfajy/

Adding move instructions to the css like the following doesn't create any animation effect when filtering the list:

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

Can someone post a working example?

Upvotes: 18

Views: 44088

Answers (2)

Jason Goemaat
Jason Goemaat

Reputation: 29194

I got it working with some messing around and using the next sibling css selector + (fiddle). Apparently the move animation is applied to all elements between the first moved element and the next to last changed element, but not to the last changed element.

You can see in this fiddle where I swap two people 4 spaces apart that the move animation is applied to elements 0, 1, 2 and 3 but not 4, even though I only swapped elements 0 and 4. The next sibling selector overrides values set for both for elements 1, 2, and 3 and is the only style applied to 4.

In this fiddle you can really see it, there's a button that replaces the 6th element with the 3rd and puts new people in 1st and 3rd. 1st and 3rd get the enter animation while 4th and 5th get the move animation and 6th gets nothing, even though the 6th position is the only one with a moved person in it.

Upvotes: 14

gsklee
gsklee

Reputation: 4934

Per the documentation:

  • enter - when a new item is added to the list or when an item is revealed after a filter
  • leave - when an item is removed from the list or when an item is filtered out
  • move - when an adjacent item is filtered out causing a reorder or when the item contents are reordered

So filtering the items in and out will only trigger the enter and leave animations, not the move animation.

To trigger the move animation, you need to cause a reorder of the items, as in this jsfiddle example:

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

You may also wanna check out a more in-depth explanation on ngAnimate:

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

Upvotes: 8

Related Questions