transition がうまくいかなかった

<< 戻る   トップ >>

昨日、デスクトップとフレームの UI がなんとなくうまくいったのだが、「フレームの最大化・復元をアニメーションさせたいな」などと欲をかいたらとんだ目に遭った。

CSS で transtion 設定をしたら、どうしたものか、ハンドルを使った移動や変形には問題が生じないのに、最大化だけうまくいかなくなるという怪奇現象が起きた。最大化へ向かうアニメーションが動き始めるのだが、途中から勝手にもとの大きさに戻ってしまう。

結論からいうと、pointerdown のポインタイベントが、最大化ボタンだけではなく移動用のタイトルバーにまで達するのが問題だった。よくある event propagation に係る考慮漏れである。最大化ボタンのイベント処理で Event.stopPropagation() を呼んだら問題が解決した。


作成: 2021-11-26 16:27:40更新: 2021-11-28 16:05:59
https://museo-anonimo.jp/nanban/?id=1573,https://museo-anonimo.jp/nanban/tr/1573