0

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

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

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

我试过这样：

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

我究竟做错了什么？

希望你能帮忙。

更新：

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

怎么了？

4

2 回答 2

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;
    }
});
于 2016-12-28T15:18:19.433 回答
0

将 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 解决方案。我发现很少有没有原生 angular 指令可以处理我在 jquery 中尝试做的事情的情况。

于 2016-12-28T15:47:29.773 回答