0

クラスslideInRightとslideOutRightをul要素に切り替えてslideIn/slideOutアニメーションを取得したくありません。

さまざまな方法で試しましたが、1 つの className でしか機能しません。

最初にクラスslideInRightを追加し、クラスdropdown -menuを使用して ul 要素を 2 回目にクリックしてクラスslideOutRightを追加するにはどうすればよいですか?

私はこの方法で試しました：

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

私は何を間違っていますか？

お役に立てれば幸いです。

アップデート：

これが私のコードの現在の状態のプランカーです。この方法では、slideInRight アニメーションのみが機能します。ボタンをもう一度クリックすると、slideOutRight アニメーションなしで ul が消えます。

どうしたの？

4

2 に答える 2

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

ulOpen をスコープ変数としてコントローラーに追加します

コントローラ

$scope.ulOpen = false;

HTML

次に、ulOpen の値を設定するには、angularjs ディレクティブ ng-click に依存する必要があります。

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

そして、ulOpen の値に基づいてクラスを切り替える ng-class:

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

一般に、可能な限り純粋な angularjs ソリューションを見つけることをお勧めします。jquery でやろうとすることを処理できるネイティブの angular ディレクティブがないケースはほとんどありません。

于 2016-12-28T15:47:29.773 に答える