How to trigger ngAnimate class sequence when using element.addClass inside directive

Question

Inside of a directive I'm adding various classes on an element based on user interaction.

How can I get the ngAnimate class sequence (e.g. my-class-add -> my-class-add-active) when using element.addClass in place of ngClass directive?

I want to use CSS transitions, not JS animations.

Thanks.

Answer 1

You need to add the class via the animate service (angularjs 1.2) like

module.directive('directive', function ($animate) {
    return {
        restrict:"A",
        link: function($scope,$element) {
            $element.on("click", function() {
                $animate.addClass($element,"my-animation");
            });        
        };
    }
});

Doc

Answer 2

Ideally you'd delegate that to another directive which is tied in with ngAnimate (i.e. ng-show, ng-if, ng-repeat .etc.)

You can set a scope property and let another directive handle the animation classes.