切換上點擊

Question

兩個類與AngularJS/jqLit​​e我wan't通過切換類slideInRight和slideOutRight的UI元素得到的slideIn /滑出式動畫。

我試過了不同的方式，但我只能用一個className。

如何添加類slideInRight第一，類slideOutRight第二次點擊我的帶班下拉菜單 ul元素呢？

我試着這樣說：

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'"> 

和JS

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

Answer 2

到控制器添加ulOpen可變

一個範圍

控制器

$scope.ulOpen = false; 

HTML

那麼你應該依靠angularjs指令NG單擊設置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解決方案。我發現很少的情況下，沒有一個本地的角度指令，可以處理我會在jQuery中嘗試做的事情。