支持无 cssanimations 时的 AngularJS 1.2 动画回退

Question

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

• 仅使用 CSS ng-enter、ng-enter-active 等时，我的 CSS 动画效果很好。
• 我的 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。