전환 클릭

Question

에 AngularJS와/jqLite 두 클래스는 내가 slideOutRight는 UL 요소에 클래스를 slideInRight 및 을 전환하여 slideIn/슬라이드 아웃 애니메이션을 얻을 wan't.

여러 가지 방법으로 시도했지만 한 클래스 이름으로 만 작동합니다.

어떻게 처음에 클래스를 slideInRight을 추가하고, 클래스 드롭 다운 메뉴 내 UL 요소에서 두 번째 클릭에 클래스 slideOutRight 수 있습니까?

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

내가 잘못 뭐하는 거지 :

나는이 방법을 시도했습니다?

희망 하시겠습니까?

---

UPDATE : 여기

내 코드의 현재 상태의 Plunker입니다. 이 방법은 slideInRight 애니메이션 만 작동합니다. 버튼을 다시 클릭하면 ul이 slideOutRight 애니메이션없이 사라집니다.

무엇이 잘못 되었나요?

Answer 1

각도의 ng-class을 사용해 볼 수 있습니다.

나는 종류의 새로운 각도로 해요,하지만 난 그런 식으로는이 같았다 :

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

및

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

Answer 2

이

변수 범위로 컨트롤러에 ulOpen을 추가 JS를

컨트롤러

$scope.ulOpen = false; 

ulOpen의 값에 따라 클래스를 전환 할

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

그리고 NG 급 : 6,

그런 다음 당신이 AngularJS와 지시어에 의존해야 HTML은 ulOpen의 값을 설정 NG 클릭

을

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

일반적으로 나는 정확한 각도 해결책을 찾는 것이 좋습니다. 나는 jquery에서해야 할 일을 처리 할 수있는 네이티브 각도 지시어가없는 경우는 거의 없습니다.