akai
#1
プロジェクト内でaccordionAnimation
というAngularAnimationを作成しております。
ngForで回す配列に、CDK Dragと組み合わせて適用させたのですが、
どうやら配列の並び替えを行うと、項目削除時のアニメーションがおかしくなることが確認されました。
具体的には、:leave
アニメーションが実行されるはずなのに、:enter
アニメーションが実行されてしまうようです。

以下はCDK Dragなどを省き、問題を単純化した再現コードです。
原因と対策について、なにかわかることはありますでしょうか。
d-oku
#2
詳しくはないですが、
こちらの問題のような気がします。
ソートが行われると、animationのstateが (void=>* (:enter)などの) voidになるようです。
のようにvoid=>voidを上に持っていく
または、trackbyをindexでやるととりあえず動きそうでした
(こちらは原因はわからないです。)
「いいね!」 1
akai
#3
情報ありがとうございます!
ソートが行われると、animationのstateが (void=>* (:enter)などの) voidになるようです。
なるほど、と思い(@accordion.start)
にconsole.logを入れて確認したところ、確かに以下のような推移をたどってvoid voidになっていました……!!
- 画面に表示される → fromState: void, toState: null
- 上の項目が下に移動する → fromState: null, toState: void // これが悪いっぽい?気がするね。 内部的にここからずっとvoidっぽい
- 削除 → fromState: void, toState: void
そこで、void => voidのアニメーションを一番上に設定したところ、確かに動きました!
もしやと思い、void=>voidを削除し、:enter
ではなく:leave
を上においてみたところ、これでも動きました!!
バグっぽいですが、これは完全に納得の挙動ですね。
または、trackbyをindexでやるととりあえず動きそうでした
提示されたstackblitzを確認しましたが、trackByFnがインデックスを返しているので、削除する項目に対してアニメーションが効いておりません。(常に一番下の項目がアニメーションしますね)
なのでコチラについてはなにか勘違いされているかと思います?
animationのどうにもできないバグかなぁと半ばあきらめていたのですがなんとかなりました!
ありがとうございます!!
d-oku
#4
void → void ∈ * → voidですよね ^^; 恥ずかしいです。
解決されたようで良かったです。