angularjs - 支持无CS动画时的AngularJS 1.2动画回退

我正在将新的AngularJS 1.2方法（year of moo article）用于使用CSS3过渡的动画。如果浏览器不支持CSS动画，我想有条件地应用后备jQuery动画。


仅使用CSS ng-enter，ng-enter-active等时，我的CSS动画效果良好。
使用app.animations（“ ...”）时，我的jQuery动画工作正常，如下所示
我正在使用Modernizr，因此.no-cssanimations类已经应用于我的html文档。
当IE9之类的浏览器不支持CSS动画时，我想有条件地应用jQuery动画。


现在，我正在尝试通过这样的类选择器“ .no-cssanimations .slideup-form”来完成此操作...

//Simplified angular animation example
app.animation("**.no-cssanimations .slideup-form**", function () {
     return {
          enter: function (element, done) { ... },
          leave: function (element, done) { ... }
          }
});

那不行有没有更好的方法可以做到这一点？

谢谢...

更新：

我无法弄清楚上面的选择器方法-但通过在javascript中测试Modernizr对象，有条件地调用app.animation（）使其起作用。我没意识到你可以像这样测试。

if (Modernizr.canvas) { ... }

再次感谢您的帮助。

最佳答案

您不能在animation（）工厂方法中使用复杂的选择器。您只能将一个CSS类名称用于一个级别。而是使用$ sniffer来确定您的动画工厂方法是否有条件基于浏览器的功能，方法是使用$ sniffer来检测是否存在过渡。

//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动画代码中调用done（）。同时升级到1.2.5。