配列の並び替えを行うと、leaveアニメーションがenterアニメーションになる

プロジェクト内でaccordionAnimationというAngularAnimationを作成しております。

ngForで回す配列に、CDK Dragと組み合わせて適用させたのですが、
どうやら配列の並び替えを行うと、項目削除時のアニメーションがおかしくなることが確認されました。

具体的には、:leaveアニメーションが実行されるはずなのに、:enterアニメーションが実行されてしまうようです。

output

以下はCDK Dragなどを省き、問題を単純化した再現コードです。

原因と対策について、なにかわかることはありますでしょうか。

詳しくはないですが、


こちらの問題のような気がします。

ソートが行われると、animationのstateが (void=>* (:enter)などの) voidになるようです。


のようにvoid=>voidを上に持っていく
または、trackbyをindexでやるととりあえず動きそうでした
(こちらは原因はわからないです。)

1 Like

情報ありがとうございます!

ソートが行われると、animationのstateが (void=>* (:enter)などの) voidになるようです。

なるほど、と思い(@accordion.start)にconsole.logを入れて確認したところ、確かに以下のような推移をたどってvoid voidになっていました……!!

  1. 画面に表示される → fromState: void, toState: null
  2. 上の項目が下に移動する → fromState: null, toState: void // これが悪いっぽい?気がするね。 内部的にここからずっとvoidっぽい
  3. 削除 → fromState: void, toState: void

そこで、void => voidのアニメーションを一番上に設定したところ、確かに動きました

もしやと思い、void=>voidを削除し、:enterではなく:leaveを上においてみたところ、これでも動きました!!

バグっぽいですが、これは完全に納得の挙動ですね。

または、trackbyをindexでやるととりあえず動きそうでした

提示されたstackblitzを確認しましたが、trackByFnがインデックスを返しているので、削除する項目に対してアニメーションが効いておりません。(常に一番下の項目がアニメーションしますね)

なのでコチラについてはなにか勘違いされているかと思います?


animationのどうにもできないバグかなぁと半ばあきらめていたのですがなんとかなりました!
ありがとうございます!!

void → void ∈ * → voidですよね ^^; 恥ずかしいです。
解決されたようで良かったです。