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

时间:2015-03-10 19:31:49

标签: angularjs css-animations

想象一张不同栏中卡片的棋盘,比如trello。

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

当某些东西导致卡片在列之间移动时,我会拼接原点阵列并将该项目弹出到目标阵列上。我想用卡片在屏幕上移动的简短动画来说明这一点。

示例:

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

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

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

1 个答案:

答案 0 :(得分:-1)

您可以使用ng-animatehttps://docs.angularjs.org/api/ngAnimatehttp://www.nganimate.org/angularjs/ng-repeat/move)在ng-repeat个事件期间应用类,并且可以使用这些类来应用css转换。