AngularJS 1.2 Animation 回退，当不支持 cssanimations 时

Question

我正在使用新的 AngularJS 1.2 方法 ( year of moo article ) 制作使用 CSS3 转换的动画。如果浏览器不支持 CSS 动画，我想有条件地应用回退 jQuery 动画。

我的 CSS 动画在仅使用 CSS ng-enter、ng-enter-active 等时工作正常。

我的 jQuery 动画在使用 app.animations("...") 时工作​​正常，如下所示

我正在使用 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) { ... }

再次感谢您的帮助。

Answer 1

你不能在你的 animation() 工厂方法中使用一个复杂的选择器。一个级别只能使用一个 CSS 类名。相反，通过使用 $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。