Какой правильный AngularJS 1.2 способ реализовать эту директиву, которая запускает эту анимацию?
Я создал директиву, которая так выглядит: app.directive('fadeInDown', function ($animate) {
var directive = {
link: link,
restrict: 'A',
};
return directive;
function link(scope, element, attrs) {
scope.$watch(attrs.delay, function (newVal) {
TweenMax.set(element, { position: 'relative' });
TweenMax.from(element, attrs.speed, { opacity: 0, top: '-20px', delay: attrs.delay, onComplete: done });
function done() {
var test = "DONE";
}
});
};
});
И я называю это с моей точки зрения так:
<div id="home-view" class="body-wrapper" data-ng-controller="home as vm">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12" data-fade-in-down data-delay=".2" data-speed="1">
<div class="callout-box clearfix">
<div class="callout-content">
<h2 class="h1-section-title">BLAH BLAH BLAH.</h2>
</div>
</div>
</div>
</div>
</div>
Анимация работает отлично, но я хотел знать, как мне это сделать, используя $ animate с angular 1.2.13???
Я пробовал следующее:
app.directive('fadeInDown', function ($animate) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
scope.$watch(attrs.hideMe, function () {
$animate.addClass(element, "fade-in");
});
}
});
Но как передать параметры обратно в анимацию????
Класс загружается в другой модуль, например так:
(function () {
'use strict';
var app = angular.module('app');
app.animation('.fade-in', function () {
return {
addClass: function(element, done) {
TweenMax.set(element, { position: 'relative' });
TweenMax.from(element, attrs.speed, { opacity: 0, top: '-20px', delay: attrs.delay, onComplete: done });
}
};
});
})();
Может кто-нибудь объяснить, как получить это право???
ПОЖАЛУЙСТА, ДАЙ МНЕ ЗНАЕТЕ, ЕСЛИ МОЙ ВОПРОС НЕ ЯСЕН.
Спасибо!!!