在数组内移动时动画列表项

Question

Plunker

此plunker显示使用ng-repeat

显示为列表的数组

每个数组项都有一个向上和向下按钮，允许它使用上方或下方的数组项来更改位置。

我还使用angular-animate在每个项目的位置发生变化时将其闪烁。

但是我想要做的是将项目向上移动并闪烁蓝色项目向下移动。

欢迎任何建议

Answer 1

我不是angularJS的专家，但是，我确实有一个想法：

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

因此，虽然“移动”仅适用于您点击的按钮，但您可以将您的javascript更改为将类添加到您交换的其他元素并移动。

然后你可以在

之后的css中使用某些东西来触发CSS动画

[class]-[event]-[state]

模型，它可以像

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