使用第三方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);
});
};
});
答
$有生返回一个承诺，根据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享受您的第三方库动画。
只是想说明我标记为“主持人”的关注。我认为这对于某个人来说可能是有价值的，但是需要在问题和答案方面进行重新表述，而不是全部在问题部分。 – Josh 2014-12-09 13:37:52
Thx为旗！在那里的第一篇文章，所以很无知的最佳做法:) – grebett 2014-12-09 15:12:55
我只是不希望人们进来关闭它。这些信息是有价值的，但只是需要打破。我不认为只有版主才可以这样做...... – Josh 2014-12-09 16:15:39