Animating list items when moved within array

Question

Plunker

This plunker shows an array displayed as a list using ng-repeat

Each array item has an up and down button allowing it to to change position with the array item above or below.

I'm also using angular-animateto flash each item red when it's position is changed.

But what I'd like to do is flash red the item moving up and and flash blue the item moving down.

Any suggestions welcome

sova · Accepted Answer · 2015-03-23 00:43:45Z

1

I'm not an expert at angularJS, but, I do have an idea:

http://jptacek.com/2015/03/angularJS-CSS-Animation/

There are five AngularJS events
   enter - DOM element is add to the DOM tree
   leave - DOM element is removed from the DOM tree
   move - DOM element is moved within the DOM tree
   addClass - A class is added to an element
   removeClass - A class is removed from an element

So, although "move" is only working on the button you are clicking, you can change your javascript to add a class to the other elements that you swap with and move.

Then you can trigger the CSS animation by using something in your css following the

[class]-[event]-[state]

model, where it can be like

.ng-addClass { ... }
.ng-addClass-active { ... }

answered Mar 23, 2015 at 0:43

sova

5,66811 gold badges43 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animating list items when moved within array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related