可CSS关键帧动画在角的NG-动画指令中使用？ [英] Can CSS keyframe animation be used in Angular's ng-animate directive?
问题描述
下面的的动画项目插入列表中的一个简单的Plunkr 。这使用-webkit变换比例从刻度插入（0）比例（1）。切换NG-动画=插入，到NG-动画='推子'将使用JavaScript动画插入的项目。
Here's a simple Plunkr that animates the insertion of items in a list. This uses -webkit-transform to scale insertions from scale(0) to scale(1). Switching the ng-animate="'insert'" to ng-animate="'fader'" will use Javascript animation to insert the items.
但我想能在这里使用CSS关键帧动画来代替。在列表中的最后一项是硬codeD，并使用浮动输入启动级。我似乎无法使NG-动画正确地应用此类。这似乎是设置NG-动画='浮动应该工作，但事实并非如此。我缺少什么？
But: I'd like to be able to use CSS keyframe animation here instead. The last entry in the list is hard-coded and uses the "float-enter-start" class. I cannot seem to make ng-animate apply this class correctly. It seems like setting ng-animate="''float" should work, but it doesn't. What am I missing?
推荐答案
为什么你的CSS动画code不工作的原因是因为它使用CSS3的动画，而不是过渡。眼下AngularJS ngAnimate还不支持CSS的检测性能animation-（仅过渡）。还有就是此问题得到解决，本周的请求，并我计划在星期一之间做本周五的来了。
The reason why your CSS animation code isn't working is because it's using CSS3-Animations and not transitions. Right now AngularJS ngAnimate does not yet support detecting CSS animation- properties (only transition). There is a request to get this fixed this week and it I plan on doing it between Monday and Friday of this week coming up.
在此期间，如果你想仍然支持这点，你可以得到这个使用JavaScript动画一无所有函数体内的工作。所有你要做的就是调用完成（）方法后，你的CSS动画的XXXX毫秒。然后在你的CSS code（因为ngAnimate还增加了CSS类元素），你可以使用相同的CSS动画code，但只使用该函数体内部总工期一组超时内。
In the meantime if you wish to still support this then you can get this to work using a JavaScript animation with nothing inside the function body. All you do is call the done() method after XXXX milliseconds of your CSS animation. Then in your CSS code (since ngAnimate still adds the CSS classes to the element) you can use the same CSS animation code, but just use that total duration inside of the function body inside of a set timeout.
这里的code表示。只包含来自前做实际的动画你的CSS code。
https://gist.github.com/matsko/5426873
Here's the code for that. Just include your CSS code from before to do the actual animation. https://gist.github.com/matsko/5426873
这篇关于可CSS关键帧动画在角的NG-动画指令中使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
