Question

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

再次感谢您的帮助。

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。

当支持no-cssanimations时，AngularJS 1.2动画回退

1 个答案: