Question

我创建了一个像这样的补间指令： 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>

动画效果很好，但我想知道如何使用角度为1.2.13的$ animate来做到这一点

我尝试了以下内容：

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 });
        }
    };
});
})();

任何人都可以解释如何做到这一点???

请让我知道我的问题是否不清楚。

感谢!!!

什么是正确的AngularJS 1.2方法来实现触发此动画的指令？

0 个答案: