Animate in order with angular and animate.css

Im trying to add some animation to my angular application with animate css.
I have a directive with transclude = true, so I can insert sub directives inside a parent directive.

I wrote some custom code to add the animation as I had some hard time using ng-show in my case, as I have to seperate modules that I dont want to depend on each other, one is menu module that represent a menu, and the other is security module, that contains a directive that shows or hides directives depending on the users role.

My role directive looks somthing like this:

(function(angular) {
'use strict';
angular.module('angSecurity')
.directive('angSecurityRole', angSecurityRole);
////////////
function angSecurityRole($timeout, PubSub) {
    var DEFAULT_ANIMATION = 'fade';
    return {
        restrict: 'A',
        transclude: false,
        multiElement: true,
        controller: 'angLoginCtrl',
        controllerAs: 'alc',
        link: function(scope, element, attr) {
            var vm = scope.alc;
            scope.$watch(function() {return attr.angSecurityRole;}, ngShowWatchAction);
            var subscriptions = [];
            //listen to role changing events
            subscriptions.push(PubSub.subscribe('event-user-logged-out' , ngShowWatchAction));
            subscriptions.push(PubSub.subscribe('event-user-logged-in'  , ngShowWatchAction));
            //remove subscriptions when destroyed
            scope.$on('$destroy', function() {
                angular.forEach(subscriptions, function(subscription) {
                    PubSub.unsubscribe(subscription);
                });
            });
            //////////////
            function ngShowWatchAction(newVal, oldVal) {
                var changed      = newVal !== oldVal;
                var actualRole   = vm.getRole();
                var requiredRole = attr.angSecurityRole;
                var show         = requiredRole === actualRole;

                var animation    = getAnimation();
                if (show) {
                    element.css('display', 'block');
                }
                element.addClass(animation);
                $timeout(function() {
                    element.removeClass(animation);
                    if (!show) {
                        element.css('display', 'none');
                    }
                }, 1000);
                ////////////////
                function getAnimation() {
                    var defaultAnimation = DEFAULT_ANIMATION + (show ? 'In' : 'Out');
                    var animation = null;
                    if (!!attr.animation && attr.animation !== null) {
                        animation = scope.$eval(attr.animation);
                        animation = show ? animation.enter : animation.leave;
                    }
                    return 'animated ' + animation ?  animation : DEFAULT_ANIMATION;               
                }
            }
        }
    };
}
})(angular);

And the menu directives are:

(function(angular) {
'use strict';
angular.module('angMenu')
    .directive('angMenu', angMenu);
////////////
function angMenu() {
    return {
        transclude: true,
        templateUrl: 'app/modules/menuModule/templates/menu.tpl.html',
        controller: 'menuController',
        controllerAs: 'mc',
        scope: {},
        link: function(scope, elem, attrs) {
            var vm = scope.mc;
        }
    };
}
})(angular);

and:

(function(angular) {
'use strict';
angular.module('angMenu')
    .directive('angMenuItem', angMenuItemDirective);
////////////
function angMenuItemDirective() {
    return {
        require:    '^angMenu',
        replace:    true,
        transclude: true,
        templateUrl: 'app/modules/menuModule/templates/menuItem.tpl.html',
        scope: {
            label: '@',
            icon:  '@',
            route: '@'
        },
        link: function(scope, el, attrs, ctrl) {
            var vm = ctrl; //ctrl reffers to angMenu (parent controller)
            scope.isActive = function () {
                return el === vm.activeItem;
            };
            el.bind('click', function(ev) {
                ev.stopPropagation();
                ev.preventDefault();
                ctrl.setActiveItem(el);
                ctrl.setRoute(scope.route);
                scope.$apply();
            });
        }
    };
}
})(angular);

I want the animation of the the transcluded elements to occur after the parent animation, how can U do that?


Source: css

Leave a Reply