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?

ntgCleaner · Accepted Answer · 2016-12-28 15:18:19Z

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, 2016 at 15:18

ntgCleaner

5,99510 gold badges54 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codehan25 Over a year ago

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 Over a year ago

Here is a Plunker with the current state of my code: Plunker

jbrown · Accepted Answer · 2016-12-28 15:58:23Z

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, 2016 at 15:58

answered Dec 28, 2016 at 15:47

jbrown

3,0351 gold badge18 silver badges22 bronze badges

3 Comments

Codehan25 Over a year ago

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 Over a year ago

Here is a Plunker with the current state of my code: Plunker

jbrown Over a year ago

@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.

Collectives™ on Stack Overflow

Toggle two classes with AngularJS / jqLite on click

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related