CODEWITHSUNDEEP
angularjsng-animate
Francisc
Francisc

Reputation: 80415

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

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.

Upvotes: 0

Views: 1284

Answers (2)

kfis
kfis

Reputation: 4729

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

Upvotes: 3

eddiec
eddiec

Reputation: 7646

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.

Upvotes: 1

Related Questions