AngularJS 1.2动画后备既然没有cssanimations支持 [英] AngularJS 1.2 Animation fallback when no-cssanimations supported
问题描述
我使用的是新AngularJS 1.2方法(的哞文章)使用CSS3过渡动画的一年。我想有条件地申请一个备用jQuery的动画,如果浏览器不支持CSS动画。
I'm using the new AngularJS 1.2 approach (year of moo article) for animations using CSS3 transitions. I'd like to conditionally apply a fallback jQuery animation if the browser doesn't support CSS animations.
- 我的CSS动画的精细工作时只使用CSS NG-进入,NG-进入活跃等。
- 我的jQuery的动画使用app.animations时工作正常(...),如下所示
- 我使用的Modernizr这样。没有-cssanimations类已经应用到我的HTML文档。
- 我想有条件地应用在CSS动画不支持的浏览器,如IE9 jQuery的动画。
现在,我正在努力做到这一点通过类选择无cssanimations .slideup形式的这样的...
Right now, I'm trying to do it through the class selector ".no-cssanimations .slideup-form" like this...
//Simplified angular animation example
app.animation("**.no-cssanimations .slideup-form**", function () {
return {
enter: function (element, done) { ... },
leave: function (element, done) { ... }
}
});
这不工作。有没有更好的方式来做到这一点?
That's not working. Is there a better way to accomplish this?
谢谢...
更新
我没能找出方法选择上面的 - 但我把它通过有条件地调用app.animation()通过在JavaScript测试Modernizr的对象工作。我不知道你可以测试这个样子。
I wasn't able to figure out the selector approach above - but I have it working by conditionally calling app.animation() by testing the Modernizr object in javascript. I didn't realize you could test like this.
if (Modernizr.canvas) { ... }
您的帮助再次感谢。
Thanks again for the help.
推荐答案
您不能使用像动画中的()工厂方法复杂的选择。您只能为一个级别使用一个CSS类名。反而让有条件的基于浏览器的功能通过使用$嗅探动画工厂方法,如果你有过渡那里或不检测。
You can't use a complex selector like that in your animation() factory method. You can only use a single CSS class name for one level. Instead make your animation factory method conditional based on the browser's capabilities by using $sniffer to detect if you have the transitions there or not.
//you can make this an EMPTY string if you want this animation to apply to ALL
//possible elements...
app.animation('.slideup-form', function($sniffer) {
if(!$sniffer.transitions) {
//this object will conditionally be added if the browser doesn't support
//native CSS3 animations
return {
enter : function(element, done) {},
leave : function(element, done) {},
move : function(element, done) {},
beforeAddClass : function(element, className, done) {},
addClass : function(element, className, done) {},
beforeRemoveClass : function(element, className, done) {},
removeClass : function(element, className, done) {}
}
}
});
请记住调用来完成()在你的JS动画code。也升级到1.2.5。
Just remember to call done() in your JS animation code. Also upgrade to 1.2.5.
这篇关于AngularJS 1.2动画后备既然没有cssanimations支持的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!