問題タブ [angularjs-animation]

ng-enter アニメーションが機能しないようです。小さな見出しボックスである、いわゆる「機能ボックス」を提示する繰り返しの div があります。多数のチュートリアルを読みましたが、コードが異なる/機能しない理由がわかりません。誰でもそれを理解できますか？

私のコードは次のとおりです。

HTML:

CSS:

編集：

ここにjsfiddleがあります：https://jsfiddle.net/zu1bjzj9/4/

「cardViewer」と呼ばれるAngularディレクティブを作成します。これは、その中の画像をアニメーションで表示できます。

「前へ」ボタンを押すと、画像が左にスライドします。「次へ」ボタンを押すと、画像が右にスライドします。

アニメーション クラスのみをng-switchサポートする でこれを実行しようとしています。しかし、入るには2つの方法（左右から入る）、出るには2つの方法（左右に離れる）が必要です。.ng-enter.ng-leave

だから私はng-classこの問題を解決しようとします。toLeft切り替える前にクラスを追加して、特定のcssアニメーションを適用できることを願っています。

しかし、それは正しく機能していないようです。「次へ」ボタンを2回押すと、うまくいきます。しかし、「次へ」を押してから「前へ」を押すと、新しい画像は正しい方向に入力されますが、古い画像は間違った方向に残ります。

私のディレクティブ テンプレート:

指令：

CSS:

ここに私のプランカーがあります: cardViewer

コードの何が問題になっていますか? ng-switch を複数の方法で出入りさせる正しい方法は何ですか?

下の画像のように見えるイオンアプリケーションのアニメーションに固執しています。いろいろ検索しても似たタイプのアニメが見つからなかったので、誰か助けてくれませんか？

画像を見つけてください：

画像のアニメーションは、ユーザーがボタンをクリックしたときに表示され、円は楕円形でゆっくりと通知アイコンに移動します。

通知（ブリーフケース）内に到達すると、線と円が自動的に消えます。

これを手伝ってください。本当に必要です。前もって感謝します。

絶対配置 div のリストから要素を削除すると、そのアクションの ngAnimate アニメーションが期待どおりに実行されません。以下は例です

HTML

CSS

JavaScript

JSFiddle:リンク

基本的に何が起こっているかというと、要素がすぐに削除され、他の要素が代わりに配置され、削除された要素のアニメーションが実行されますが、他の要素がその上にあるため表示されません (つまり、angular は要素を削除し、リスト全体を再レンダリングし、アニメーションを実行します)。そのため、要素が 1 つしかない場合でも、アニメーションは正常に機能します。

必要なのは、最初にアニメーションを実行してから、リスト全体を再レンダリングすることです。誰もこれを行う方法を知っていますか?

ネストされたコメントのリストを使用して Ionic アプリを構築しています。返信を子要素としてアニメーション化し、状態を保持する必要があります。現在、jQuery slideToggle で単純なディレクティブを使用していますが、これは状態を保持しません (そして「Angular の方法」ではありません)。

この Shlomi Assaf によるスライド アニメーションの例は、私が必要としているものの素晴らしい出発点ですが、ネストされた要素を処理していません。問題を示すために、彼の CodePen プロジェクトのネストされたバージョンを作成

ネストされた要素を処理するためにアニメーション関数を変更する必要があるかどうか、または子要素がアニメーション化されたとき (または完了した後) にコントローラーが先祖要素のアニメーションを呼び出す必要があるかどうかはわかりません。

ご協力をお願いいたします。ネイティブ AngularJS ディレクティブを使用した HTML の基本は次のとおりです。

元のアニメーション関数は次のとおりです。

いくつかのアニメーション作業を行おうとしていますが、何らかの理由で ng-show / ng-hide 遷移中に適切なクラスが追加されません。添付されていないことを示すこのアニメーションを添付しました。私は何を間違っていますか？

に添付されているものなど、他のアニメーションが機能していることに言及する必要がありui-viewます。

CodePen デモ: http://codepen.io/anon/pen/OyoyYX?editors=101

クロムを使用している場合は、デバッガー ブラウザーを調べます。enter/etc クラスがアタッチされていないことがわかります。

アップデート：

GitHub のこのケースは関連しているようです: https://github.com/angular/angular.js/issues/12267