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?

score 1 · Answer 1 · answered Dec 28 '16 at 15:18

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;
    }
});

answered Dec 28 '16 at 15:18

ntgCleaner

5,865
9
48
86

Thank you for your suggestions ntgCleaner. As with the approach of @jbrown, only the SlideInRight animation works. When I click the button again, the ul disappears without the slideOutRight animation – Codehan25 Dec 29 '16 at 08:14
Here is a Plunker with the current state of my code: [Plunker](https://plnkr.co/edit/yIthpKYZwNvi60PzAHZj?p=preview) – Codehan25 Dec 29 '16 at 08:54

jbrown · Answer 2 · 2016-12-28T15:58:23.000

0

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.

edited Dec 28 '16 at 15:58

answered Dec 28 '16 at 15:47

jbrown

3,025
1
15
22

Thanks for your suggestions jbrown. But this is way onle the SlideInRight anmation works. When I click the button again, the ul disappears without the slideOutRight animation. – Codehan25 Dec 29 '16 at 07:57
Here is a Plunker with the current state of my code: [Plunker](https://plnkr.co/edit/yIthpKYZwNvi60PzAHZj?p=preview) – Codehan25 Dec 29 '16 at 08:54
@Codehan25 - the issue isn't with the usage of ng-class but instead there is something going on with bootstrap's dropdown-menu class and animate's slideOutRight/slideInRight classes. You can see this by removing the dropdown-menu class from the ul element. I'm no css expert but I'm guessing that the only way around this is to hack either or both of the bootstrap and animate css. You may have to edit or repost your issue to draw attention from the css experts. – jbrown Dec 29 '16 at 13:54

Toggle two classes with AngularJS / jqLite on click

2 Answers2