Toggle two classes with AngularJS / jqLite on click

Question

I wan't to get a slideIn / slideOut animation by toggling the classes slideInRight and slideOutRight to a ul element.

I've tried it in different ways but I it only works with one className.

How can I add the class slideInRight on the first, and the class slideOutRight on the second click on my ul element with the class dropdown-menu?

I've tried it this way:

angular.element('.dropdown-toggle').on('click', function(){
    angular.element('ul.dropdown-menu').toggleClass('slideOutRight slideInRight');
});

What am I doing wrong?

Hope you can help.

---

UPDATE:

Here is a Plunker of the current state of my code. This way only the slideInRight animation works. If I click the button again, the ul disappears without the slideOutRight animation.

What's wrong?

Answer 1

You may want to try using angular's ng-class?

I'm sort of new to angular, but the way I did it was like this:

<ul class="dropdown-menu" ng-class="ulOpen ? 'slideOutRight' : 'slideInRight'">

and the js

angular.element('.dropdown-toggle').on('click', function(){
    if($(this).hasClass('.slideOutRight')) {
        ulOpen = true;
    } else {
        ulOpen = false;
    }
});

Answer 2

Add ulOpen to your controller as a scope variable

Controller

$scope.ulOpen = false;

HTML

Then you should rely on the angularjs directive ng-click to set the value of ulOpen:

<button class="dropdown-toggle" type="button" ng-click="ulOpen=!ulOpen">Toggle Class</button>

And ng-class to switch class based on the value of ulOpen:

<ul class="dropdown-menu" ng-class="slideOutRight: ulOpen, slideInRight: !ulOpen">

In general, I would recommend whenever possible you find the pure angularjs solution. I find very few cases where there isn't a native angular directive that can handle what I would otherwise attempt to do in jquery.