切换上点击

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中尝试做的事情。