問題タブ [angularjs-animation]

現在、Angular.js で CSS3 アニメーションを実行しようとしています。
アニメーション化する前に、Javascript を使用して最初の CSS プロパティを設定しようとしました。
では、Javascript を使用してアニメーションを初期化し、CSS3 を使用してアニメーションを続行する方法はありますか?

私の状況:
ユーザーが div をクリックすると、ダイアログが表示されます。ダイアログは、元の div (同じサイズ、同じ位置) から正確に開始し、その後、より大きなサイズに拡大する必要があります。

定義済みの位置とサイズからダイアログをアニメーション化できます。

CSS:

クリックした div のサイズから始まるダイアログをアニメーション化したいと思います。これまでのところ、私のコード (まだ動作していません) は次のようになります。

HTML:

Javascript:

ページの重量を低く抑えるために、jQuery を使用せずにこれを行うことをお勧めします。

よろしく、 ヘンドリック・ヤン

この JSFiddle を参照してください: http://jsfiddle.net/5mUsH/3/

AngularJS と jQuery で本当に単純な JavaScript アニメーションを実行しようとしています。(古いブラウザーをサポートし、より複雑なアニメーションも実行したいので、CSS アニメーションは使用していません。) フィドルのコードは AngularJS ユーザー ガイドからのものです (ただし、少し簡略化されています): http://docs.angularjs.org/ガイド/アニメーション

しかし、うまくいきません！DOM はすぐに (アニメーションなしで) 更新されます。何か案は？ありがとう！

JSFiddle からの関連するマークアップは次のとおりです。

そして JavaScript:

特に hide-element ディレクティブ内で、ネストされたディレクティブに問題があります。

まず、ngAnimate では機能しないと思われる編集モード ディレクティブがあります。ヒット addClass フェード オン ボタンは引き続きヒットしますが、ng-animate はバインドされません。

非表示要素を divColumn の兄弟要素に移動しようとしましたが、edit-element ディレクティブが機能し、ボタンと divColumn の両方でアニメーションを実行します。

それらがネストされている場合は機能しません。何故ですか？

（私はAngularJSを初めて使用します。親切に教えてください）

HTML

角度

ここにjsfiddleがあります。基本的に、アニメーションは思い通りに動作しますが、データの初期化のために発生させたくありません。私は何をしますか？

angularjsコントローラーでDOMオブジェクトにアクセスするようなハックよりも、この状況に対処する適切な方法を見たいと思っています。

更新 1:

ngClassアニメーションにスイッチを実装するために使用してみましたが、そのシンプルさが気に入っています。ただし、問題は、アニメーションがディレクティブを持つ要素に適用されるngRepeat場合にのみ、このアプローチが何らかの形で機能することですが、この特定のシナリオでは、の子要素でアニメーションを発生さngRepeatせる必要があります。

このjsfiddleからわかるように：

http://jsfiddle.net/robcampo/pWGuS/

Angular アニメーションを使用して要素をフェードアウトし、別の要素をフェードアウトしようとしています。

フェード (不透明度とトランジションを使用) が機能します。ただし、ご覧のとおり、現在表示されている要素を非表示にする前に、以前に非表示にした要素を表示します。これにより、両方の要素が同時に表示されます。

質問

2 番目の要素を表示する前に、最初の要素が完全に非表示になるまで待機する方法はありますか? カスタム ディレクティブを使用してこれを実行できることは確かですが、そのルートをたどる前に、すぐに使用できる方法がないことを確認したいと思います。

私が試したこと

a) フェード インする要素に遷移遅延を設定します。

b) 高さのプロパティを使用する

アプリで非表示にしている div はグリッド システムの一部であるため、これはうまくいきません。

ノート

これを jQuery で実装するとしたら、次のようになります。

次のようにトゥイーンするディレクティブを作成しました: app.directive('fadeInDown', function ($animate) {

そして、私はそれを次のように呼び出します。

アニメーションは完全に機能しますが、angular 1.2.13 で $animate を使用してこれを行う方法を知りたいですか?

私は次のことを試しました：

しかし、どのようにパラメーターをアニメーションに戻すのですか????

クラスは、次のように別のモジュールにロードされます。

誰もこれを正しくする方法を説明できますか???

質問が明確でない場合はお知らせください。

ありがとう！！！