Angular $animate and directive not behaving properly

Question

So either, I'm just not getting it or the documentation is incomplete, or something else, but I can't seem to figure out my code, and what is happening.

I'm working on a directive that dynamically creates an overlay an generates a sliding menu. I've followed the solutions over several different questions and guides online. I've even read the angular documentation and nothing is working.

I can't get passed the initial creation of the background overlay. This is frustrating.

You start by clicking the icon button

<i class='fa fa-bars' slider-menu></i>

Then the slider-menu directive should activate and the css should take over.

sliderMenu.js

angular.module('dt').directive('sliderMenu', SliderMenuDirective);

SliderMenuDirective.$inject = ['$document', '$rootScope', '$animate'];

function SliderMenuDirective($document, $rootScope, $animate){
    return {
        link : function(scope, element, attr){
            var body = $document.find('body').eq(0);
            element.on('mousedown', function(event){
                $animate.addClass(body, 'menu-overlay');                    
            });
        }
    }
}

css

@keyframes menuOverlay{
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    100% {
        background-color: $navy-blue-alpha;
    }
}
.menu-overlay:after{
    content : "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    background-color: rgba(0,0,0,0);
    animation-name: menuOverlay;
}

Upon inspection on the initial click the only thing that is happening is the body tag gets the attribute of data-ng-animate="1". Then nothing happens. I click again and then the body tag has a new class of menu-overlay-add. I have no idea what is going and am very lost. Can someone help point me in the right direction and maybe clarify animations just a little more, or show me what I'm doing wrong?

Answer 1

on is a jQuery/jqLite method and does not automatically trigger the digest loop, which is why Angular's animation cycle isn't working correctly in your example.

You can use $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

For example:

element.on('mousedown', function(event) {
  scope.$apply(function() {
    $animate.addClass(body, 'menu-overlay');
  });
});

Your animation also needs a duration specified:

animation-duration: 2s;

If you want the background-color from the last keyframe to remain you can use:

animation-fill-mode: forwards;

Or the shorthand:

animation: menuOverlay 2s forwards;

Demo: http://plnkr.co/edit/6zTMlsNkg1xvKJpLs8dN?p=preview