4

我正在使用新的 AngularJS 1.2 方法（moo 文章年）来制作使用 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) { ... }

再次感谢您的帮助。

4

1 回答 1

4

您不能在 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。

于 2013-09-14T14:20:50.137 回答