問題タブ [angularjs-animation]

Angular アニメーション ( https://docs.angularjs.org/api/ngAnimate#css-staggering-animations ) にずらした機能を使用しています。

これを使用して、すべてのアニメーションが完了するまで項目を DOM から削除しないようにする方法はありますか?

私が話していることを示すプランカーを作成しました: http://plnkr.co/edit/xlVps9v0iINV11CYlUhG

「アイテムを追加」をクリックすると、すべて問題なく表示されます。「アイテムの削除」をクリックすると、すべてが崩壊し始め、ずらした効果がてんかんの悪夢に変わります.

繰り返しディレクティブがどのように機能するかという性質上、回避策がない可能性があると思います。

複数の画像でスライダーを実行しようとしていますが、コードは右に移動しますが、左に移動すると、配列内のすべての要素に ng-move クラスが適用されますが、これは望ましくありません。

私のコントローラー：

私のCSS：

私のHTML：

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

任意の意見またはそれを行う別の方法が役に立ちます

ディレクティブ (独自のディレクティブまたはhttps://github.com/dpiccone/ng-pageslideなど) を作成またはカスタマイズするときに、すべての表示ロジックが単一の css クラスによって制御されている点に何度か遭遇しました。その時点で、ディレクティブは 1 つのクラスの追加と削除に要約されます。したがって、新しいディレクティブを使用する代わりに、単純に ng-class ディレクティブを使用できます (こちらの例を参照してください: https://gist.github.com/Hypercubed/8f40556eb0f6eddbcca3 )。カスタム ディレクティブ アプローチと ng-class/CSS スタイル アプローチの利点はありますか? カスタム ディレクティブは $animate に依存していないと思いますか? 私はそれを間違っているだけですか？

別のディレクティブと XXX の質問で申し訳ありません。

コントローラー内でいくつかのアニメーションを作成して登録するコードがあります。残念ながら、コントローラー内にアニメーションを登録するたびに、初期化されないようです (関数が呼び出されることはありません)。

問題を説明するためにプランカーを作成しました。これで、コントローラーの外側で「createAnim1」を呼び出すと、アニメーションが正しく機能します。コントローラー内で「createAnim2」を呼び出しましたが、アニメーションが機能しません。

createAnim 関数の形式は次のとおりです。

明らかな何かが欠けていますか？$animate および $animateProvider のドキュメントには、これに関連するものは何も含まれていないようです。

これは、コンパイルが既に行われており、アニメーションを初期化するために必要ないくつかのステップが欠落しているという事実に関係していると思いますか? これを回避する方法はありますか？

PS: 先週から angular しか使っていないので、内部についてはよくわかりません。

編集: アレックスからのコメントの後、私がやろうとしていることを明確にする価値があると思います:

css クラス アニメーション セレクターを生成し、それらをドキュメント ヘッドに追加するコードがいくつかあります。ブラウザーがトランジションをサポートしていない場合、コードは jquery アニメーションと同等のものを生成します。DI を介してこのコードを公開するファクトリを作成しようとしましたが、このコードが (コントローラー内から) 実行されると、アニメーションをトリガーできなくなります (初期化コードは実行されません)。

例: http://codepen.io/anon/pen/ixEdu

上記の例では、ngClass を使用した角度のあるアニメーションがあります。アニメーションを含む要素が再コンパイルされると、アニメーションが実行されます。これが発生しないようにするにはどうすればよいですか?

HTML:

CSS:

Javascript:

Angular ngSwitch アニメーションを 2 つの異なる方法で適用しています。1 つはディレクティブ内、もう 1 つは html ページです。ディレクティブ内のアニメーションは、ページの読み込み時に発生します。これが発生する理由と修正方法を教えてください。

プランカー: http://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview

index.html

script.js

スタイル.css

value-rotate.html (ディレクティブ テンプレート)

私は AngularJS v1.2.16 をng-show使用しています。クラス規則を使用してフェードインのような単純なアニメーションを取得しましたが、モデルの特定のオブジェクトが変更されたときに特定の div をフェードイン (または点滅) したい (このオブジェクトの情報はその div 内に表示されます) ）。

私のコードが$scope.$apply();変更のソースとして使用するのは AngularJS ではないことに注意してください。

適用の前または後にアニメーションを強制する方法があるのでしょうか、それともディレクティブでこれを行う必要がありますか? アニメーション システムに変更が加えられたため、これに関する情報を見つけるのは非常にわかりにくいものです。