Question

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

我尝试过不同的方式，但我只使用一个className。

如何在第一次添加课程 slideInRight ，在第二次点击时添加课程 slideOutRight 在我的ul元素上使用类 下拉菜单 ？

我试过这种方式：

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

我做错了什么？

希望你能提供帮助。

更新：

这是我代码当前状态的Plunker。这种方式只有slideInRight动画才有效。如果我再次单击该按钮，则ul会在没有slideOutRight动画的情况下消失。

怎么了？

Answer 1

您可能想尝试使用angular 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-click来设置ulOpen的值：

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

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

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

一般情况下，我会建议您尽可能找到纯粹的angularjs解决方案。我发现很少有这样的情况，即没有一个本地角度指令可以处理我在jquery中尝试做的事情。

单击

2 个答案: