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