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屋！