AngularJS 1.2動畫後備時，不支持cssanimations

我使用新的AngularJS 1.2方法（year of moo article）動畫使用CSS3轉換。如果瀏覽器不支持CSS動畫，我想有條件地應用回退jQuery動畫。AngularJS 1.2動畫後備時，不支持cssanimations

我的CSS動畫精細工作時，只使用CSS NG-進入，NG-進入活躍等
我的jQuery的動畫使用app.animations時工作正常（「...」）作爲如下所示
我使用Modernizr，因此.no-cssanimations類已應用於我的html文檔。
我想在IE9等瀏覽器不支持CSS動畫時有條件地應用jQuery動畫。

現在，我試圖通過類選擇「沒有-cssanimations .slideup形式」這樣做...

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

無法運作。有沒有更好的方法來完成這一點？

謝謝...

UPDATE：

我沒能找出選擇上述方法 - 但我有它通過有條件地調用通過測試Modernizr的app.animation（）工作在JavaScript中的對象。我沒有意識到你可以這樣測試。

if (Modernizr.canvas) { ... }

再次感謝您的幫助。

來源

2013-08-18 Ender2050

我認爲app.animation是要走的路，如果你想做JavaScript動畫。你的選擇器是「**。no-cssanimations .slideup-form **」什麼東西？ –

我已驗證選擇器是否使用簡單的CSS測試有效 - 但app.animation（）似乎無法找到它。謝謝你的提示。 – Ender2050

您不能在animation（）工廠方法中使用類似複雜的選擇器。您只能爲一個級別使用單個CSS類名稱。相反，通過使用$嗅探器來檢測您是否有轉換，從而使您的動畫工廠方法有條件地基於瀏覽器的功能。

//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-14 14:20:50 matsko

感謝您的全面回答 - 我不知道$嗅探器 - 好東西！ – Ender2050

AngularJS 1.2動畫後備時，不支持cssanimations

回答

相關問題