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

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