Angular Animation: How to add extra classes to a specific element when animation starts and ends?

Question

I'm using state router to transition between pages. I need to add a class to the <body> while the animation is running and remove it once the enter and leave animations are completed.

I tried to create a directive an inject the $animate service. Then I started listening for enter and leave events as suggest in documentation.

The html:

<div class="ui-view-container">
    <div ui-view style="height:100%;" class="suffle-page" suffle-page></div>
</div>

The directive:

;(function(){
    angular.module('app')
        .directive('sufflePage',function($animate){
            var $body = $('body');

            return {
                link: function (scope, element) {
                    //var $el = $('[ui-view]');
                    $animate.enter(element,
                        function callback(element, phase) {
                            //$body.addClass('animating');
                        }
                    );
                    $animate.leave( element, function(){
                        function callback(element, phase) {
                            //$body.removeClass('animating')
                        }
                    })
                }
            }
        });
})();

Then I have the CSS that animates those views //prevents animation in mobile devices to faster performance

.ui-view-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  ...
}

[ui-view].ng-enter {
  ..
}

[ui-view].ng-enter-active {
  ..
}

[ui-view].ng-leave {
  ...
}

[ui-view].ng-leave-active {
  ...
}

body.animating{
/*this element is outter of the animation that's why i must append a class to the top level element. in this case body*/
  .special-element{
    display: none;
  }
}

At $animate.enter(element...) an error is thrown:

TypeError: Cannot read property 'createDocumentFragment' of null

Any help?

Lothre1 · Accepted Answer · 2015-06-27 01:16:08Z

I was misunderstanding the use of $animate.enter and $animate.leave and **I also did use an incorrect version of angular because the $animate.leave are part of 1.4.x versions an my project was built on top of version 1.3.0.

After updating the angular.js and angular-animate.js all i had to do was 1) create the directive that will monitor enter:start and enter:end events 2) load the directive into the project 3) and write the piece of code that adds the class to the body during the animation.

I hope it helps.

.directive('sufflePage',function($animate){

        var $body = $('body');

        return {
            link: function (scope, element) {
                if (!element){
                    return;
                }

                /***
                 * when the ui-view that is `entering` the page stars it adds the animating class to body
                 * when it leaves it removes the animating from the body class
                 *
                 * IMPORTANT: this works because the enter and exit animation are triggered in parallel with the same duration
                 *
                 */
                $animate.on('enter', element,
                    function callback(element, phase) {
                        if (phase == 'start'){
                            $body.addClass('animating');
                        } else {
                            $body.removeClass('animating');
                        }
                    }
                );

                scope.$on('$destroy', function(){
                    $animate.off('enter',element);
                });
            }
        }

Collectives™ on Stack Overflow

Angular Animation: How to add extra classes to a specific element when animation starts and ends?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related