JavaScriptの「transitionend」をキャンセルできないでしょうか？

Question

実現したいこと

JavaScriptのtransitionendをキャンセルできないでしょうか？

発生している問題

ifの中を通っていないのに、ifの中のtransitionendの処理が走ってしまいます。

該当のソースコード

次のソースコードはchangeBox()をこのように２回処理をしています。

１回目
➀ changeBox() の type に null を渡す
➁ .box に transitionend をかけ、p.text( 'いいい' ); にする

２回目
➂ changeBox() の type に 'show' を渡す
④ p.text( 'あああ' ); にする

なのに２回目に'いいい'になってしまうのです。

https://jsfiddle.net/omLy95bq/

<p>●●●</p>
<div class="box">box</div>

.box {
  transition: 1s;
  background: gray;
}
.box.is_red {
  background: pink;
}
.box.is_blue {
  background: skyblue;
}

$(function(){

	changeBox( null );   // １回目
	changeBox( 'show' ); // ２回目

	function changeBox( type ) {

		if ( type == 'show' || type === 'up' || type === 'down' ) {
			$( 'p' ).text( 'あああ' );
		}

		$( '.box' ).addClass( type === null ? 'is_red' : 'is_blue' );

		if ( type === null ) {
			$( '.box' ).on('transitionend', function() {
				$( 'p' ).text( 'いいい' );
			});
		}

	}

});

試したこと

試したこと➀：時間差の確認

'いいい'にしたいのはnullを渡した場合だけなのに、なぜこうなってしまうのか？

まず考えたのはtransition: 1s;の途中で２回目を実行しているせいか？という疑念で、その確認のために２回目をsetTimeoutで実行しました。しかし変化なく、相変わらず２回目に'いいい'になってしまいます。

https://jsfiddle.net/omLy95bq/1/

$(function(){

	changeBox( null );   // １回目
	// changeBox( 'show' ); // ２回目
	setTimeout( ()=>{ changeBox( 'show' ); }, 5000 ); // ２回目

	/*
		省略
	*/

});

試したこと②：コンソールの確認

次に各所でコンソールを確認してみました。

１回目は'nullが渡されました'と'いいいにします'が出力されるのですが、
２回目は'あああにします'と'いいいにします'が出力されます。

つまり２回目はifの中（'nullが渡されました'）を通っているわけではなく、しかしifの中のtransitionendの中（'いいいにします'）を通っているように見受けられました。

https://jsfiddle.net/omLy95bq/2/

$(function(){

	changeBox( null );   // １回目
	// changeBox( 'show' ); // ２回目
	setTimeout( ()=>{ changeBox( 'show' ); }, 5000 ); // ２回目

	function changeBox( type ) {

		if ( type == 'show' || type === 'up' || type === 'down' ) {
			console.log('あああにします');
			$( 'p' ).text( 'あああ' );
		}

		$( '.box' ).addClass( type === null ? 'is_red' : 'is_blue' );

		if ( type === null ) {
			console.log('nullが渡されました');
			$( '.box' ).on('transitionend', function() {
				console.log('いいいにします');
				$( 'p' ).text( 'いいい' );
			});
		}

	}

});

以上のことから、１回目でtransitionendの処理がどこかに登録（？）されたまま、２回目の実行ではその登録は解除されず、処理が走ってしまうという状況のように思われます。

そこでタイトルの質問になります。

「transitionend」をキャンセルできないでしょうか？

具体的にイメージしているのは次のようなキャンセルで、これなら２回目に 'show' を渡した時点で、１回目に登録された処理は走らないだろうという目論見です。

		if ( type == 'show' || type === 'up' || type === 'down' ) {
			$( '.box' ).on('cancelTransitionend'); // 「transitionend」をキャンセル
			$( 'p' ).text( 'あああ' );
		}

バージョン

jQuery 3.6.0

補足

尚、MDNを見るとtransitioncancelというそれっぽい名前の関数があったのですが、これは登録されているtransitionendをキャンセルするのではなく、CSSのtransitionが途中でキャンセルされたときに発火させたいイベントを登録する関数のようです。

Answer 1

質問にある jsfiddle

https://jsfiddle.net/omLy95bq/

に書かれているコードの if (type === null) に対する else として以下を追加するとどうでしょう？

  if (type === null) {
    $('.box').on('transitionend', function() {
      $('p').text('いいい');
    });
- }
+ } else {
+   $('.box').off('transitionend');
+ }

この修正は、transitionendイベントを発生しないようにするというものではなく、type===null のときに設定したtransitionend発生時のコールバックをその直後のtype==='show' のときに解除するという修正です。これによって1秒後に実際にtransitionendが発生したときにはコールバックが設定されていないので何も起こらず、その結果 <p> のテキストが いいい にならなくなるかと思います。

Comments

[Cocode]

部外者ですが…すっごいいい回答ですね！！1回目に呼び出したtransitionedがずっと有効中だから、transitionが起こるたびに「いいい」になってしまう。だから、2回目のときに無効化してるのですね。勉強になりました。

[nikuatsu]

ありがとうございます。
.on('cancelTransitionend');
ではなくて
.off('transitionend');
というのがあったのですね。

Answer 2

一度登録したイベントリスナはイベントが起きる毎に何回でも呼ばれるのがデフォルトの動作なので、何回も呼ばれないように登録を解除する必要があります。jQuery の場合は、on() の代わりに one() で簡単に行うことができます。

			$( '.box' ).one('transitionend', function() {

Comments

[Cocode]

それ私も試してみたんですけど、1回目が「いいい」になる前に、2回目の処理が終わるので、遅れて1回目の「いいい」がやっと処理終了して、結果「いいい」となってしまいました。
.one() を使用する場合、1回目の処理が全て終了してから2回目の実行を開始しなければならず、cssのtransitionと同じ秒数遅らせて2回目が実行開始されるように .setTimeout() でする必要があります。

[nikuatsu]

ありがとうございます。oneというイベント登録方法もあったとは勉強になりました。

Answer 3

勘違いされていると思います。
１回目の changeBox 呼び出し時の on('transitionend', func..) 内の処理は、ご指定の通りtransition 完了後（この場合一秒後）に走ります。※ですのでこの１回目の処理は継続中です。
この時、まだ　いいい　にはなっておりません。
その間、２回目の changeBox が走ります。
この時、　あああ　となります。
この後、transitionが完了するので　いいい　となります。
transition の完了後に何かを実現したいのか、１回目の処理が完了した後に（コールバックやらを利用し）２回目を走らせたいのかこの辺りのイメージをよく考えてから実装された方が良いと思われます。