单击时使用 AngularJS / jqLit​​e 切换两个类

Question

我不想通过切换类 slideInRight 和 slideOutRight 来获得 slideIn / slideOut 动画一个 ul 元素。

我以不同的方式尝试过它，但它只适用于一个类名。

如何在第一次单击时添加类 slideInRight，在第二次单击时添加类 slideOutRight在我的 ul 元素上使用 dropdown-menu 类？

我试过这样：

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

我做错了什么？

希望你能帮忙。

---

更新：

这是我的代码当前状态的Plunker。这样只有 slideInRight 动画有效。如果我再次单击该按钮，则 ul 会消失而没有 slideOutRight 动画。

怎么了？

Answer 1

您可能想尝试使用 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;
    }
});

Answer 2

将 ulOpen 作为范围变量添加到您的控制器

控制器

$scope.ulOpen = false;

HTML

那么你应该依靠angularjs指令ng-click来设置ulOpen的值：

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

和ng-class根据ulOpen的值切换class：

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

一般来说，我会建议您尽可能找到纯 angularjs 解决方案。我发现很少有没有原生 angular 指令可以处理我在 jquery 中尝试做的事情的情况。