Angular.js: ng-CSSの無限キーフレームアニメーションで奇妙な動作をする場合

問題は、ngAnimateが、使用されるすべてのアニメーションイベント（Enter、Leaveなど）に対して無限のアニメーションが存在すると見なすことです。 また、これは無限のアニメーションであるため、7.5秒後の最後のカウントダウンが経過するまでCSSイベントが発生することはありません（5 x 1.5 == 7.5）。

要素の.ng-animate CSSクラスをオーバーライドし、キーフレームアニメーションをキャンセルして、無限の背景アニメーションをアニメーション化しないようにng-animateに指示する必要があります。

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ?p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

残念ながら、JavaScriptでのスタイルとCSSクラスの検出は非常に制限されています。 以前のバージョンのAngularJSでは、アニメーションプロパティ（.ng-enter、.ng-leaveなど）でのみCSSアニメーション/トランジションを定義できるというルールがありましたが、それによって解決されるよりも多くの問題が発生しました。 したがって、この場合は逆のことをする必要があります。

PS。 他のすべてのベンダーがプレフィックスを削除したため、必要なのは-webkit-プレフィックスと標準のanimationプロパティだけです。

かっこいい、回避策をありがとう。

一度に複数のコピーを作成することは、私にはまだバグのように思えます。 ng-ifを使用する要素が一度存在するか、まったく存在しないことを前提にコードを記述します。不注意によるnoobのミスによる簡単な破損を防ぐためのフレームワーク。 ng-if （またはng-switch ）がどのように機能するのか誤解した場合は、訂正してください。

アニメーションがまだ続いていたので、複数のコピーがそこにありました。 また、$ animateには、期間* 1.5の期限が切れた後に発生するキーフレーム/トランジションのcatch-allアニメーションがあります。 そのため、しばらくすると消えます。

ng-ifコードが正しい。 そして、はい、それは真実のときだけそこにあります。 ただし、内部では、式が再びtrueになるたびに、要素の新しいコピーが作成されます。 ただし、アニメーションは古い要素にぶら下がっているため、すべてのアニメーションをキャッチするまで、まだ削除されていません。

また、ng-switchとng-ifは同じように動作します。 ng-switchだけが1つではなく複数の要素を持っています。