可以在Angular的ng-animate指令中使用CSS关键帧动画吗？

Question

这是a simple Plunkr动画列表中项目的插入动画。这使用-webkit-transform来扩展从scale（0）到scale（1）的插入。将ng-animate =“'insert'”切换为ng-animate =“'fader'”将使用Javascript动画插入项目。

但是：我希望能够在这里使用CSS关键帧动画。列表中的最后一个条目是硬编码的，并使用“float-enter-start”类。我似乎无法使ng-animate正确应用此类。似乎设置ng-animate =“''float”应该有效，但事实并非如此。我错过了什么？

Answer 1

你的CSS动画代码不起作用的原因是因为它使用CSS3-Animations而不是过渡。目前，AngularJS ngAnimate尚不支持检测CSS动画属性（仅限转换）。本周要求修复此问题，我计划在本周一周一到周五之间进行修复。

与此同时，如果您仍然希望支持这一点，那么您可以使用JavaScript动画在函数体内没有任何内容。您所做的只是在CSS动画的XXXX毫秒后调用done（）方法。然后在CSS代码中（因为ngAnimate仍然将CSS类添加到元素中），您可以使用相同的CSS动画代码，但只需在设置超时内使用函数体内的总持续时间。

这是代码。只需包含之前的CSS代码即可进行实际动画制作。 https://gist.github.com/matsko/5426873