使用第三方JavaScript庫自定義AngularJS動畫

雖然嘗試基於帶有AngularJS $ animate的velocity.js構建動畫，但遇到了一個我幾個小時都無法找到的小問題，雖然解決方案非常簡單。爲避免你同樣的困難，我向你們介紹我的解決方案：使用第三方JavaScript庫自定義AngularJS動畫

考慮下面的代碼：

app.directive("animate", function ($animate, $timeout) { 
    return function (scope, element, attrs) { 
     element.on('click', function() { 
      // to fire $animate, need to wrap it into a $timeout wrapper. 
      $timeout(function() { 
       $animate.addClass(element, 'test').then(function() { 
        $timeout(function() { 
         $animate.removeClass(element, 'test'); 
        }, 0); 
       }); 
      }, attrs.delay || 0); 
     }); 
    }; 
});

來源

2014-12-09 grebett

只是想說明我標記爲「主持人」的關注。我認爲這對於某個人來說可能是有價值的，但是需要在問題和答案方面進行重新表述，而不是全部在問題部分。 – Josh 2014-12-09 13:37:52

Thx爲旗！在那裏的第一篇文章，所以很無知的最佳做法:) – grebett 2014-12-09 15:12:55

我只是不希望人們進來關閉它。這些信息是有價值的，但只是需要打破。我不認爲只有版主纔可以這樣做...... – Josh 2014-12-09 16:15:39

$有生返回一個承諾，根據official documentation。但是，當自定義動畫實際上完成射擊這個承諾，你必須使用作爲第三個參數提供的done()功能，如下面：

app.animation('.test', function() { 
    var fn = function (element, className, done) { 
     var effect = { 
      css: { 
       translateX:'+=500' 
      }, 
      options: { 
       easing: 'linear', 
       duration: 2000, 
       complete: function() {done();} 
      } 
     }; 

     element.velocity(effect.css, effect.options); 
    }; 

    return { 
     addClass: fn, 
     removeClass: function() {console.log('removed';} 
    }; 
});

小動作，所以，但這個原型是從所有的文檔和教程失蹤我從現在開始。使用Angular享受您的第三方庫動畫。

來源

2014-12-11 10:26:40 grebett

使用第三方JavaScript庫自定義AngularJS動畫

回答

相關問題