Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 865
user2354397 Avatar asked May 06 '13 11:05

user2354397


People also ask

How do you animate in AngularJS?

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.

Is angular animate part of AngularJS?

This package contains the legacy AngularJS (version 1. x). AngularJS support has officially ended as of January 2022.

What is custom directive in AngularJS?

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.

Which of the following directives are associated with animate service?

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.


2 Answers

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.

like image 164
Jason Goemaat Avatar answered Nov 11 '22 13:11

Jason Goemaat


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

like image 23
gsklee Avatar answered Nov 11 '22 12:11

gsklee