問題タブ [ng-animate]

リストを並べ替えたいのですが、現在、各アイテムにボタンを付けてリストを上下に移動しています。アイテムをスムーズに動かしたいng-animateのですが、アニメーションしか見つかりません-move。それは、場所を切り替えている2つの一番上の要素でしか機能しないようです。私はそれを正しく見ることができません。これが私がこれまでに持っているものです：フィドル

の目的がよくわからないと思い-moveます。2人の場所を入れ替えているのですが、上の方にしか影響がないようです。それらが交換されているように見せたいです。サンプル フィドルには、既存のオブジェクトを移動して -enter と -leave する代わりに、新しいオブジェクトを作成するためのチェックボックスがあります。おそらく、2 つの方法を組み合わせることができます。

1. -move上の人 (以前は下にいた人) に使用し、相対的な位置を上向きにアニメートします
2. -enter新しいオブジェクトを作成し、相対的な位置をアニメーション化することにより、下の人に使用します

これを行うためのより簡単またはより良い方法はありますか?

その他の考え: jquery-ui のドラッグ アンド ドロップのようなものがあればいいのですが、それを含めて、AngularJS で動作させることができるかどうかを調べる必要はありません。

私は、項目のリストのカスケード効果を作成する任務を負っていました (それぞれが他の項目よりも数分の 1 秒遅れて発生します)。を発見したとき、私がどれほど興奮したか想像できるでしょうng-animate。私はすでにリストに を入力しているng-repeatので、それを追加して CSS を変更するだけで簡単に思えました。これが私が狙っているものです: ngRepeat で ngAnimate を遅らせる方法

しかし、実際には機能していないようです。何か案は？これが私のフィドルの例です：フィドル ng-animate。

html

CSS

私のフィドルでわかるように、実行時には何もしません。

Phonegap と AngularJS を使用してモバイル アプリに取り組んでいます。私は現在、簡単にローカルの wampserver で開発とテストを行っています。

モバイルアプリと同様のビューの変更をアニメーション化するためにng-animate、自分のに取り組もうとしています。ng-view私が従うガイドや使用するコードは、まったく何もしていないようです。エラーやアニメーションはありません。

これが私の現在のng-viewコードです：

そして、これがその ng-animate の現在の CSS です。

それでも、エラーやアニメーションはまったくありません。私が間違っていることや、アニメーションを機能させる方法についてのアイデアはありますか? ありがとう。

最新の angularJS バージョン 1.1.5 でアニメーションをテストしていましたが、正しく動作していないようです。このフィドルをチェックしてください

HTML:

CSS:

AngularJS:

ただし、バージョン 1.1.4 に戻すと問題なく動作しますが、v1.1.5 で修正されたという別のバグがあります。今、これは紛らわしいです。彼らは新しいバグで以前のバグを修正しましたか? とにかく、助けていただければ幸いです。

私のパーシャルの1つで、私はこれを行います：

$state.includes は angular-ui ルーターの例からそのまま出てきたものです。もちろん、角度のあるUIを使用しています。

ここに私の appState 関数があります:

かなり普通。

新しい stateParam ごとにパーシャルがリロードされると、ng-if は新しい DOM 要素を (新しい Hash $$ で) 作成します。そして、「enter」アニメーションを呼び出すたびに問題ありません。しかし、破棄される DOM 要素は「leave」を呼び出していません。

私が何も悪いことをしていないのであれば、これを行うためのより良い方法、つまり、新しいパラメーターを使用してリロード時にビューをアニメーション化する方法を求めるべきです...

ありがとう！

========== UPDATE ========== ここに JSFiddle があります。上記のコードから多くを借りているわけではありませんが、私はかなり確信しています。http://jsfiddle.net/morgs32/xPxkX/1

表示/非表示になったときに ng-show 要素をアニメーション化しようとしています。ただし、通常の ng-show、instand show/hide のように機能します。

私はこの例を見つけました: http://jsfiddle.net/Kx4TS/1/ これは正常に動作します。

それでも、同じ ng-animate 属性と同じ css を使用すると、私の場合は機能しません。他に何かする必要があるか、またはアニメーションが機能しない場合はありますか?

私のコードは次のようになります。

CSSは次のとおりです。

また、ng-animateにjqueryのslideDown/slideUpアニメーションのようなことをさせることは可能ですか?

私の場合、ng-view次のテンプレートと前のテンプレートを表示する矢印を持つスライダーです。現在、テンプレート間の遷移用のアニメーションは 1 種類です。

クリックされた矢印に応じて異なるアニメーションを実行するように動作を拡張したいと考えています。「次へ」の矢印をクリックするslide-forward-enterと &slider-forward-leaveアニメーションが実行され、「前へ」の矢印をクリックするslide-reverse-enterと &が実行されslider-reverse-leaveます。

これを達成する方法は？