[AnuglarJS] TweenMax with ngAnimate

Also read: http://www.cnblogs.com/Answer1215/p/3941966.html

 

Using ngAnimate:

//!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.
var ngModule = angular.module('YourApp', ['ngAnimate']);
ngModule.animation('.my-crazy-animation', function() {
  return {
    enter: function(element, done) {
      //run the animation here and call done when the animation is complete
      return function(cancelled) {
        //this (optional) function will be called when the animation
        //completes or when the animation is cancelled (the cancelled
        //flag will be set to true if cancelled).
      };
    },
    leave: function(element, done) { },
    move: function(element, done) { },

    //animation that can be triggered before the class is added
    beforeAddClass: function(element, className, done) { },

    //animation that can be triggered after the class is added
    addClass: function(element, className, done) { },

    //animation that can be triggered before the class is removed
    beforeRemoveClass: function(element, className, done) { },

    //animation that can be triggered after the class is removed
    removeClass: function(element, className, done) { }
  };
});

 

Example:

js:

angular.module('categories', [
    'eggly.models.categories',
    'ngAnimate'
])

    .config(function ($stateProvider) {
        $stateProvider
            .state('eggly.categories', {
                url: '/',
                views: {
                    'categories@': {
                        controller: 'CategoriesController',
                        templateUrl: 'app/categories/categories.tmpl.html'
                    },
                    'bookmarks@': {
                        controller: 'BookmarksController',
                        templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
                    }
                }
            });
    })

    .controller('CategoriesController', function ($scope) {


    })


    .directive('menuItem', function(){
        var controller = function($scope){
            $scope.mouse_over = false;
        };

        return {
            scope: true,
            controller: controller
        }
    })

    .animation('.menu-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                if (className == 'highlight') {
                    TweenLite.to(element, 0.2, {
                        width: '223',
                        borderLeft: '10px solid #89CD25',
                        onComplete: done
                    });
                    TweenLite.to(element.find('a'), 0.2, {
                        color: "#89CD25"
                    });
                }
                else {
                    done();
                }
            },

            beforeRemoveClass: function (element, className, done) {
                if (className == 'highlight') {
                    TweenLite.to(element, 0.4, {
                        width: '180',
                        borderLeft: '5px solid #333',
                        onComplete: done
                    });
                    TweenLite.to(element.find('a'), 0.4, {
                        color: "#5bc0de"
                    });
                }
                else {
                    done();
                }
            }
        };
    });

 

HTML:

<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
    <li menu-item ng-repeat="category in categories"
        class="menu-animation"
        ng-class="{'highlight':mouse_over}"
        ng-mouseenter="mouse_over = true"
        ng-mouseleave="mouse_over = false"
        ng-class="{'active':isCurrentCategory(category)}">
        <a  ng-click="setCurrentCategory(category)">
            {{category.name}}
        </a>
    </li>
</ul>