問題タブ [ng-animate]

ユーザーがボタンをクリックした後、HTML のチャックを DOM の要素に追加するディレクティブがあります。この HTML のチャンクをレンダリングするときにアニメーション化する最良の方法は何ですか?

を使用して追加しているため、enterandleaveイベントはこれで機能しないようですelement.append(myHtmlChunk);

何か案は？

ユーザーが値を増減できるテーブルを作成しました。フィドルを見る

モデルが更新されたときにアニメーションを実行したい。つまり、ユーザーが値を変更した場合にテーブルの列の背景色が赤から白に変わる。

したがって、特定の列の上向き矢印または下向き矢印をクリックすると、そのテーブル列の背景色が赤から白に変わります。

私はそれを理解することができません。これを達成する方法についての指針はありますか？

ルーティングを使用して、あるページから別のページに移動します。これを行っている間、フリップのアニメーション効果が必要です。

このようなものhttp://davidwalsh.name/demo/css-flip.php

注: あるページから別のページに移動しています。同じページに 2 つのモジュールを配置してフリップを適用したくありません。

誰かがそれを行うための最良の方法を持っていますか?

テストケース: http://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview

上記のテスト ケースは、ng-repeatディレクティブで 2 回レンダリングされたデータのリストです。1回は使用せずng-include、1回は使用しng-includeます。

CSS トランジションは、ディレクティブでサポートされている 3 つすべて ( enter、leave、およびmove ) のアニメーションに対してセットアップされます。を使用しないng-repeat場合、 3 つのアニメーションはすべて正常に動作しますが、 を使用してリスト内の各項目のテンプレートをロードする場合は、 Enterアニメーションのみが動作します。ng-includeng-include

これはバグだと確信していますが、よくわかりangular-animateません。ng-repeatとng-include組み合わせて使用​​するときに何か間違ったことをしている可能性があります。angular-animateソースコードを掘り下げて問題を修正しようとしましたが、できませんでした。私が（できれば本当に）考えたのは、ng-includeディレクティブがレンダリングされたすべてのアイテムのすぐ上にコメントノードを追加し、このノードがの働きng-repeatを捨てているということだけです。angular-animateこれは、2 つの実装の唯一の顕著な違いでもあります。

また、アニメーションが設定されていない場合でも、すべての機能が正常に動作することに注意してください。しかし、 を使用した例ng-includeでは、(アイテムを上下に移動するための) アニメーションがおかしくなるだけでなく、アイテムも移動しません。

これはバグですか？もしそうなら、既知の回避策はありますか? github で angular.js の問題を検索してみましたが、回避策が見つかりませんでした (見つけたものは機能しません)。これについて助けてくれてありがとう。

Angular を使ってまだ 1 週間ほどしか経っていないので、私のコードがお粗末だったら申し訳ありません。

ルート遷移間にスライド アクションを作成しようとしています。スライドショーでエフェクトを作成できますが、ルート トランジション間では作成できません。

とにかく以下のコード：Nav

ビュー

CSS

含む

JavaScript:

https://github.com/artta/blizzの完全なプロジェクト

ありがとうございました

コールバックが遅延なしですぐに呼び出される理由がわかりません。cssを解析して遷移期間を取得すると書かれているドキュメントを読みました。

しかし、うまくいかないようです。ここに私のコードがあります：

これは私のスライドディレクティブです:

ここに私のcssがあります：

CSSトランジションを使用して、クリック時に要素を画面上のある位置から別の位置に移動するディレクティブを作成しようとしています。位置は要素のJavascript /属性によって決定され、事前に知られていません書かれたCSS。また、$scope 内の関数へのコールバックが必要です。これは、カスタム属性で指定されたトランジションの最後に行われます。したがって、要素は次のようになります

これに $animate を使用するために、カスタム ディレクティブ moveMe で、クリック時にスタイル ブロックを動的にページに追加します。

そして使用する

終了したら、アニメーションとコールバックを処理します。plunkr の例は、次の場所にあります。

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

これは非常に複雑に思えます。スタイルタグをページに追加するのは非常に複雑に思えます。私がこれを行っているのは、トランジション自体を実行時間とタイミング関数に関して外部スタイル シートで指定できるようにし、$animate.addClass を使用して、Angular がコールバックを起動する正しい時間を決定できるようにするためです。

私が望むものを達成するためのより簡単な/より良い方法はありますか?

この例は、実際の使用例に合わせて単純化されています。私の場合、アニメーション化された要素はディレクティブで作成され、最後に削除され、純粋に一時的な視覚補助です。位置に加えて、要素の開始スタイルと最終スタイルの両方について、状態間の CSS トランジションを使用して、高さと幅も動的に決定されます。各スタイルは、私が求めている効果を達成するために、異なる遷移時間 + タイミング関数を持つことができます。複数の要素を同時に異なる位置に移動したり、異なる位置から移動したりできるため、JS/CSS でそれを許可する必要があります。

ng-grid で新しく作成された行をアニメーション化するにはどうすればよいですか?

私が望むのは、サーバーから新しいデータが入ってくると、それがグリッドの先頭に追加され、その行が数秒間光るということです。

グリッドのrowTemplateにng-animateクラスを追加しようとしましたが、失敗しました:

私の公開アニメーション（ng-animate docsから直接持ち上げたもの）は次のとおりです。

しかし、これはグリッドでは機能しないようです。

これを達成する方法はありますか？

これが私の試みのプランカーです http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

<ul>必要な動作を示すために (および ng-animate が機能していることを証明するために)、下部にa を追加しました。