css - 要素が遷移中であるかどうかを検出する

Question

現在要素に何らかの遷移が適用されているかどうかをjs経由で検出する方法は?

私の問題の短い話：

イベントで関数を起動している状況がありますtransitionendが、要素にトランジションが適用されていない場合があります (たとえば、firefox では、ユーザーが要素をすばやくクリックしたため、トランジションが狂ってしまい、動作を停止します) ので、いつ動作しないかを知りたいのですが、transitionend. 私は醜い解決策を避けようとしています..

Answer 1

W3C Editor's Draft - CSS Transition で指定されているとおり

「transitionend」イベントは、遷移の完了時に発生します。transition-property が削除された場合など、完了前にトランジションが削除された場合、イベントは発生しません。

したがって、この問題を解決するための有効で簡単な方法はないと思います。解決策は、遷移をまったくレンダリングするかどうかを決定する実装 (ブラウザー) に任されています。

おそらく、トランジションを起動する要素にリスナーをアタッチし、特定の経過時間後に、トランジションされた要素に必要な CSS 属性が設定されているかどうかを確認し、それらの属性が期待どおりに設定されていない場合は、リスナーを実行することが解決策になる可能性があります。自分で機能します。