2013-12-19 12 views
10

ng-repeatでng-moveをアニメーション化すると、ちょっと狂ってしまいます。たとえば、配列項目を3から7に移動すると、項目4-7が上に移動し、項目がアニメートされます。しかし、私が3から移って7位に入った実際のアイテムは、そうではありません。ここに私の問題を説明するplunkrがあります。AngularJS ngRepeatのng-moveをアニメートすると間違った項目がアニメーション表示される

http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview

項目7~3移動、しかし、私は期待して、単一の移動アイテムをアニメーション、作品、およびプッシュダウンされていないアイテム。

これは、移動したものをユーザーに示すためにはあまり役に立ちません。誰かが適切にアニメーションをアニメートする必要がありますか?

+0

クリス、これに関する進歩? – Birowsky

+0

いいえ、申し訳ありません。私はgithubでこの問題を見つけることになったが、私は決して満足のいく行動を取ることはなかった。 https://github.com/angular/angular.js/issues/5160 – Chris

+0

upvote(非常に評価の低い)用語「flummoxed」 – drewmoore

答えて

0

正しい構文は

arrayVar.splice(to, 0, arrayVar.splice(from, 1)); 

arr.splice(i, 1)を使用し、配列arrのインデックスiにある要素を削除して戻すには、

+0

クイックアンサーに感謝します。残念ながら、それはng-enterとng-leaveを引き起こしたので動作するように見えました。 plunkrを更新して、アニメーションの表示方法を変更しました。 – Chris

+0

@Chris私はそれを得ていませんでした。私の修正はまだ動作すると思います。 '[0]'は必要ありません – zsong

+0

array.splice(i、1)を返すことで、要素ではなく配列が返されます。これにより、AngularJSのng-moveトランジションではなく、ng-leave/ng-enterがトリガされます。 plunkrは、ng-move(実際のコードでソート中に実際にトリガされる)が実際の動いているアイテムをアニメートしていないことを示すためにできる最も単純なケースです。私は赤/緑/青として離脱/入力/移動を示すためにplunkrを更新しました。それは私の問題である青いアニメーションです。私は混乱のために申し訳ありません。 – Chris

1

@tasseKatは、あなたが観察された行動を説明する優秀な答えを持っています: https://stackoverflow.com/a/27616435/1652643

しかし、彼の解決策はあなたが望むほど単純ではありません...しかし、これまでのところ、私は何も見いだせませんでした。

関連する問題