0

AngularJS と ng-class を使用して、クラスが 3 つの可能な状態の間で変化するときにアニメーション化しようとしています。div のクラスで表される 3 つの状態になることができる div があります。状態は次のように定義されます。

  1. <div class='myDiv'></div>
  2. <div class='myDiv foo'></div>
  3. <div class='myDiv bar'></div>

クラスfooとbarは排他的な意味で<div class="myDiv foo bar"></div>はないことに注意してください。次のように ng-class ディレクティブを使用しています。

<div class="myDiv" ng-class="{foo: first, bar: second}"></div>

コントローラーは、boolean 値 first と second の両方が同時に false になる可能性がありますが、true にはならないことを保証します。

ngAnimate は状態 1<-->2 と 1<-->3 の間の CSS 遷移を正しく検出しますが、2<-->3 からは検出しません。.myDiv.foo、.myDiv.bar、などのクラス セレクターに CSS トランジション コードを追加しようとしまし.myDiv.foo-add-activeたが、ngAnimate がそれらを検出しない (つまり、-add および -add-active クラスを追加しない) か、アニメーション クラスが追加されますが、遷移は発生しません。

これは、問題を示すjsFiddleへのリンクです。いずれかのボタンをクリックしてから再度クリックすると、作業中のトランジションが表示されます。どちらかのボタンをクリックしてからもう一方のボタンをクリックすると、トランジションがないことがわかります。

ngAnimate が適切に取得する魔法の遷移セットはありますか? それとも、これは ng-class を使用せずに独自のカスタム ディレクティブを記述する必要がある場合ですか?

4

2 に答える 2

1

コンソールでのstyleプロパティを.myDiv見ると、(何らかの理由で) ngAnimate が に設定transition-propertyされていることがわかりますnone。

理由はわかりませんが、CSS 内で平手打ちするように修正して!importantくださいtransition。

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
    -webkit-transition: all 1s linear !important;
    -moz-transition: all 1s linear !important;
    -o-transition: all 1s linear !important;
    transition: all 1s linear !important;
}

作業フィドル: http://jsfiddle.net/gd1hz5b7/

于 2014-10-14T19:10:30.680 に答える
0

奇妙なタイミングですが、AngularJS 1.3.0 がリリースされたばかりで、これは期待どおりに動作するようになりました。couzzi の答えはバージョン 1.2.x に対して正しいです。1.3.0 が実際に使用されるまで、多くの人がこれを使い続けると確信しています。

外部リソースを次のように変更します。

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js

元の投稿されたフィドル (!important なし) は正常に動作します。完全を期すために、新しいjsFiddleを作成しました。

于 2014-10-14T22:50:11.843 に答える