質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

nikuatsu
nikuatsu

総合スコア172

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

3回答

2リアクション

3クリップ

329閲覧

投稿2022/09/25 16:12

編集2022/09/25 16:22

実現したいこと

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

発生している問題

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

該当のソースコード

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

1回目
changeBox()typenull を渡す
.boxtransitionend をかけ、p.text( 'いいい' ); にする

2回目
changeBox()type'show' を渡す
p.text( 'あああ' ); にする

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

https://jsfiddle.net/omLy95bq/

html

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

css

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

JavaScript

$(function(){ changeBox( null ); // 1回目 changeBox( 'show' ); // 2回目 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;の途中で2回目を実行しているせいか?という疑念で、その確認のために2回目をsetTimeoutで実行しました。しかし変化なく、相変わらず2回目に'いいい'になってしまいます。

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

JavaScript

$(function(){ changeBox( null ); // 1回目 // changeBox( 'show' ); // 2回目 setTimeout( ()=>{ changeBox( 'show' ); }, 5000 ); // 2回目 /* 省略 */ });
試したこと②:コンソールの確認

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

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

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

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

JavaScript

$(function(){ changeBox( null ); // 1回目 // changeBox( 'show' ); // 2回目 setTimeout( ()=>{ changeBox( 'show' ); }, 5000 ); // 2回目 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( 'いいい' ); }); } } });

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

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

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

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

JavaScript

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

バージョン

jQuery 3.6.0

補足

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

kemusi, Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。