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?
The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations. The directives in AngularJS who add/remove classes are: ng-show. ng-hide.
This package contains the legacy AngularJS (version 1. x). AngularJS support has officially ended as of January 2022.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated.
Once active then all structural ng- directives will trigger animations as they perform their DOM-related operations (enter, leave and move). Other directives such as ngClass , ngShow , ngHide and ngMessages also provide support for animations.
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.
Per the documentation:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With