Angularjs 角度JS动画不工作（使用ngAnimate和TweenMax）_Angularjs_Angularjs Directive_Ng Animate_Gsap

Angularjs 角度JS动画不工作（使用ngAnimate和TweenMax）

angularjs

Angularjs 角度JS动画不工作（使用ngAnimate和TweenMax）,angularjs,angularjs-directive,ng-animate,gsap,Angularjs,Angularjs Directive,Ng Animate,Gsap,好的，这是我的代码： (function(){ //定义角度主模块-模块- var app = angular.module('module', ['ngAnimate']); //定义控制器-时间线- app.controller('TimeLine', function(){ this.initialize = true; }); //定义控制器-PersonalGravatar- app.controller('PersonalGravatar', function(){

好的，这是我的代码：

(function(){

//定义角度主模块-模块-

var app = angular.module('module', ['ngAnimate']);

//定义控制器-时间线-

app.controller('TimeLine', function(){
    this.initialize = true;
});

//定义控制器-PersonalGravatar-

app.controller('PersonalGravatar', function(){
    this.email = "mail@gmail.com";
    this.getImage = function(email) {
        // MD5 (Message-Digest Algorithm) by WebToolkit
        var size = size || 460;
        return 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;
    };
});

//定义动画-gravatar-

app.animation(".gravatar", function() {
    console.log("im displaying correctly");
    //that's it, this next 'return' is not working.
    return {
        console.log("im NOT displaying in console");
        enter: function(element, done){
            TweenMax.to(element, 2, { css:{left:500, onComplete:done} } );
        },
        leave: function(element, done){
            // TweenMax.to(element, 2, { css:{left:500, onComplete:done} } );
        }
    };
});

})();

那么我的html代码是：

<html class="no-js" ng-app="module"> 
... more code ...
<div id="app-main-container" ng-controller="TimeLine as animations">

        <div id="gravatar" class="gravatar" ng-controller="PersonalGravatar as gravatar"
         ng-if="animations.initialize">
            <img ng-src="{{gravatar.getImage(gravatar.email)}}" alt="">
        </div>

</div> <!-- /app main container -->
<script src="../1.2.18/angular.min.js"></script>
<cript src="../1.2.18/angular-animate.min.js"> </script>
<script src="../1.12.1/TweenMax.min.js"></script>
<script src="js/main.js"></script>


... 更多代码。。。

所以我是angularJS的新手，我不知道为什么app.animation不返回任何动画。。非常感谢

只要$timeout

 app.controller('TimeLine', function($scope, $timeout){
    return $timeout(function() {
        $scope.initialize = true;
    }, 100);
 });

我为您的示例创建了一个动画“进入”和“离开”

请注意，您不再需要将CSS属性包装到CSS对象中

enter: function(element, done){
    TweenMax.from(element, 1, {x:500, autoAlpha: 0, scale: 0.5, onComplete:done});
},
leave: function(element, done){
    TweenMax.to(element, 1, {x:500, autoAlpha: 0, scale: 0.5, onComplete:done});
}

普朗克