Q&A
> 早く動かすと動きが途中で止まってしまう
止まってしまうのではなく、「2番目の文字が上に移動し終わる前に下に戻り始めてしまう」でしょうか?
欲しい動作は「2番目の文字が上に移動する途中で hover が外れた場合でも、上への移動を完了させ、完了後即座に下に移動して戻る」ということでしょうか。
ページのサイドメニューでホバーすると2つの文字を用意した2番目の文字が下から出てきて表示最初の文字が上に押し出されて見えないようにcssを記述しています。
メニューのテキスト1からテキスト5までマウスを上下に早く動かすと動きが途中で止まってしまうのでjsコード等でアニメーションの動きが完了する前に他の要素をホバーしてもアニメーションの動きが完了させるような動きは実装可能でしょうか。
<div class="hamburger-menu-list-container01"> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト1</span> <span class="hamburger-menu-list-text01">テキスト1</span> </a> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト2</span> <span class="hamburger-menu-list-text01">テキスト2</span> </a> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト3</span> <span class="hamburger-menu-list-text01">テキスト3</span> </a> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト4</span> <span class="hamburger-menu-list-text01"テキスト4</span> </a> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト5/span> <span class="hamburger-menu-list-text01">テキスト5</span> </a> <a href="#" class="hamburger-menu-list01"> <span class="hamburger-menu-list-text01">テキスト6</span> <span class="hamburger-menu-list-text01">テキスト6</span> </a> </div>
/* ボタン本体 */ .hamburger-menu-list01 { position: relative; display: block; height: 2em; width: 100%; line-height: 2em; text-decoration: none; overflow: hidden; cursor: pointer; margin-bottom: 0.54em; } .hamburger-menu-list01:last-child { margin-bottom: 0em; } /* ボタンのテキスト */ .hamburger-menu-list-text01 { position: absolute; left: 0; display: block; height: 100%; width: 100%; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1em; color: #000000; font-weight: 500; letter-spacing: 0.05em; white-space: nowrap; transition: all 0.3s; /*アニメーション実行時間 */ } /* ボタンのテキスト(デフォルトのテキスト) */ .hamburger-menu-list-text01:nth-child(1) { top: 0%; } /* ボタンのテキスト(隠れているテキスト) */ .hamburger-menu-list-text01:nth-child(2) { top: 100%; } /* ボタンホバーアクション */ .hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(1) { top: -100%; transition: all 0.3s; } .hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(2) { top: 0%; transition: all 0.3s; }
ちょっと無理がある仕様ですけど
hoverしたら何がなんでも切り替えを終わらせるということだと思うのですが
切り替えが完了した時点でhoverは終わっているのでそこからまた元の文字に切り替えるのですよね？
この場合mouseover→mouseout→mouseoverとすると最初の処理が終わる前に次のmouseoverが発生して極度の遅延が発生し最悪なUIになりそうです
もう少し仕様をよく検討された方がよろしいかと・・・
・2番目の文字が上に移動し終わる前に下に戻り始めてしまうで合っています。
・2番目の文字が上に移動する途中で hover が外れた場合でも、上への移動を完了させ、完了後即座に下に移動して戻る」
こちらも合っています
mi-11さん
とりあえず回答した内容で動作が想定どおりかご確認ください
回答1件
0
あえてやるならこんな感じしょうか？
javascript
1<style> 2/* ボタン本体 */ 3.hamburger-menu-list01 { 4 position: relative; 5 display: block; 6 height: 2em; 7 width: 100%; 8 line-height: 2em; 9 text-decoration: none; 10 overflow: hidden; 11 cursor: pointer; 12 margin-bottom: 0.54em; 13} 14.hamburger-menu-list01:last-child { 15 margin-bottom: 0em; 16} 17 18/* ボタンのテキスト */ 19.hamburger-menu-list-text01 { 20 position: absolute; 21 left: 0; 22 display: block; 23 height: 100%; 24 width: 100%; 25 font-family: "Zen Kaku Gothic New", sans-serif; 26 font-size: 1em; 27 color: #000000; 28 font-weight: 500; 29 letter-spacing: 0.05em; 30 white-space: nowrap; 31 transition: all 0.3s; /*アニメーション実行時間 */ 32} 33 34/* ボタンのテキスト(デフォルトのテキスト) */ 35.hamburger-menu-list-text01:nth-child(1) { 36 top: 0%; 37} 38 39/* ボタンのテキスト(隠れているテキスト) */ 40.hamburger-menu-list-text01:nth-child(2) { 41 top: 100%; 42} 43 44/* ボタンホバーアクション */ 45.hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(1), 46.hamburger-menu-list01.active .hamburger-menu-list-text01:nth-child(1) { 47 top: -100%; 48 transition: all .3s; 49} 50 51.hamburger-menu-list01:hover .hamburger-menu-list-text01:nth-child(2), 52.hamburger-menu-list01.active .hamburger-menu-list-text01:nth-child(2) { 53 top: 0%; 54 transition: all .3s; 55} 56</style> 57<script> 58let n; 59 document.addEventListener('mouseenter',({target})=>{ 60/** 61 *以下調整 62 if(n=target.closest('.hamburger-menu-list01')){ 63 */ 64 if(target instanceof HTMLElement && (n=target.closest('.hamburger-menu-list01'))){ 65 n.classList.add('active'); 66 } 67},true); 68document.addEventListener('transitionend',({target})=>{ 69 target.closest('.active')?.classList.remove('active'); 70}); 71document.addEventListener('mouseout',({target})=>{ 72 setTimeout(()=>{ 73 target.closest('.active')?.classList.remove('active'); 74 },300); 75},true); 76 77</script> 78<div class="hamburger-menu-list-container01"> 79 <a href="#" class="hamburger-menu-list01"> 80 <span class="hamburger-menu-list-text01">テキスト1a</span> 81 <span class="hamburger-menu-list-text01">テキスト1b</span> 82 </a> 83 <a href="#" class="hamburger-menu-list01"> 84 <span class="hamburger-menu-list-text01">テキスト2a</span> 85 <span class="hamburger-menu-list-text01">テキスト2b</span> 86 </a> 87 <a href="#" class="hamburger-menu-list01"> 88 <span class="hamburger-menu-list-text01">テキスト3a</span> 89 <span class="hamburger-menu-list-text01">テキスト3b</span> 90 </a> 91 <a href="#" class="hamburger-menu-list01"> 92 <span class="hamburger-menu-list-text01">テキスト4a</span> 93 <span class="hamburger-menu-list-text01">テキスト4b</span> 94 </a> 95 <a href="#" class="hamburger-menu-list01"> 96 <span class="hamburger-menu-list-text01">テキスト5a</span> 97 <span class="hamburger-menu-list-text01">テキスト5b</span> 98 </a> 99 <a href="#" class="hamburger-menu-list01"> 100 <span class="hamburger-menu-list-text01">テキスト6a</span> 101 <span class="hamburger-menu-list-text01">テキスト6b</span> 102 </a> 103 </div>
投稿2024/01/25 03:44
編集2024/01/25 09:46総合スコア118405
ありがとうございます！
試してみたのですが、target.closest is not a functionとエラーメッセージが出ます。
解決方法はご存知でしょうか。
> target.closest is not a functionとエラーメッセージが出ます。
失礼しました。HTMLDocumentを拾うみたいですね。
HTMLElement限定に変更したので再度確認お願いします
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
あなたの回答
tips
プレビュー
