Переключение двух классов с помощью AngularJS/jqLite по щелчку

Я не хочу получать анимацию slideIn/slideOut, переключая классы slideInRight и slideOutRight на элемент ul .

Я пробовал по-разному, но работает только с одним className.

Как я могу добавить класс slideInRight в первый и класс slideOutRight во второй клик по моей ul элемент с классом выпадающее меню?

Я пробовал так:

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

Что я делаю не так?

Надеюсь, вы можете помочь.

ОБНОВИТЬ:

Вот Plunker текущего состояния моего кода. Таким образом работает только анимация slideInRight. Если я снова нажму кнопку, ul исчезнет без анимации slideOutRight.

Что не так?


angularjs angular-ng-class ng-class angularjs-scope angularjs-ng-click
person Codehan25    schedule 28.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете попробовать использовать angular ng-class?

Я новичок в angular, но я сделал это так:

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

и js

angular.element('.dropdown-toggle').on('click', function(){
    if($(this).hasClass('.slideOutRight')) {
        ulOpen = true;
    } else {
        ulOpen = false;
    }
});
person ntgCleaner    schedule 28.12.2016
comment
Спасибо за ваши предложения ntgCleaner. Как и в подходе @jbrown, работает только анимация SlideInRight. Когда я снова нажимаю кнопку, ul исчезает без анимации slideOutRight. - person Codehan25; 29.12.2016
comment
Вот Plunker с текущим состоянием моего кода: Plunker - person Codehan25; 29.12.2016

arrow_upward
0
arrow_downward

Добавьте ulOpen в свой контроллер в качестве переменной области видимости.

Контроллер

$scope.ulOpen = false;

HTML

Затем вы должны полагаться на директиву angularjs ng-click, чтобы установить значение ulOpen:

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

И ng-класс для переключения класса на основе значения ulOpen:

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

В общем, я бы рекомендовал, когда это возможно, найти чистое решение angularjs. Я нахожу очень мало случаев, когда нет встроенной директивы angular, которая может обрабатывать то, что я в противном случае попытался бы сделать в jquery.

person jbrown    schedule 28.12.2016
comment
Спасибо за ваши предложения jbrown. Но так работает только анимация SlideInRight. Когда я снова нажимаю кнопку, ul исчезает без анимации slideOutRight. - person Codehan25; 29.12.2016
comment
Вот Plunker с текущим состоянием моего кода: Plunker - person Codehan25; 29.12.2016
comment
@Codehan25 - проблема не в использовании ng-класса, а вместо этого что-то происходит с классом выпадающего меню начальной загрузки и классами slideOutRight/slideInRight анимации. Вы можете увидеть это, удалив класс dropdown-menu из элемента ul. Я не эксперт по css, но я предполагаю, что единственный способ обойти это - взломать один или оба бутстрапа и анимировать css. Возможно, вам придется отредактировать или опубликовать свою проблему, чтобы привлечь внимание экспертов css. - person jbrown; 29.12.2016