angularjs - 模型更新后的动画元素

Question

想象一个板卡在不同的列中，如 trello。

在我的模型中，每一列都是一个数组，而卡片只是数组中的项目。

当某事导致卡片在列之间移动时，我拼接原始数组并将项目弹出到目标数组。我想用卡片在屏幕上移动的简短动画来说明这一点。

例子：

模型中发生了一些事情，将卡片C 移动到第二列。我想要一个它从之前位置移动到之后位置的动画。

before -
| A |    |   |
| B |    |   |
| C |    |   |
| D |    |   |

after -
| A |    | C |
| B |    |   |
| D |    |   |
|   |    |   |

Answer 1

您可以使用ng-animate（https://docs.angularjs.org/api/ngAnimate，http://www.nganimate.org/angularjs/ng-repeat/move）在ng-repeat 事件期间应用类，并且您可以使用这些类来应用 css 转换。