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