Q&A実現したいこと
(1)JavaScriptでダークモード切替機能をつけ、transitionでページ全体を滑らかに変化させる
(2)jqueryでハンバーガーメニューを滑らかに動かす
(3)jqueryでページ内リンクをスムーススクロールさせる
この3つを実現したいのですが、うまくいきません。
前提
cssでパソコン用とスマホ用のデザインを作っています。
(1)(2)はスマホ用のみ、(3)は共通の機能です。
(1)はcss変数で通常カラーとダークモードカラーを設定し、javascriptによるbodyのクラス操作でモードを切り替え、ページ遷移後のモード引き継ぎにセッションストレージを利用しています。
bodyにtransitionを設定することで、モード変化を滑らかにしています。
(2)はメニューボタンクリックでの開閉に加え、メニュー内のページ内リンクをクリックするとメニューが閉じるようにしています。
開閉のアニメーションはjqueryに書いています。
(3)は、まず画面サイズを判定し、スマホであれば(2)の記述内で、パソコンであればスムーススクロール単体の記述で滑らかに移動させています。
(1)と(3)の画面サイズ判定なしのみ、(2)と(3)のみであれば問題なく実現できました。
ですが、3つともを同時に実装しようとすると、ダークモード切替時のtransitionがページ全体に効かないという問題が発生しました。
なぜかダークモードボタンとハンバーガーメニューのボタンにだけ効きます。
chromeのデベロッパーツールでは横線が引かれていないので、適用されていないわけではなさそうですが、実際は瞬時に切り替わります。
該当のソースコード
html
1<body> 2<div class="wrapper"> 3 <!-- 左カラム --> 4 <div class="left scroll"> 5 <!-- コンテンツ --> 6 <div class="contents"> 7 <div class="box" id="area-1"> 8 <h2>ボックス1</h2> 9 <p>ここに本文が入ります</p> 10 <p>ここに本文が入ります</p> 11 <p>ここに本文が入ります</p> 12 <p>ここに本文が入ります</p> 13 </div> 14 <div class="box" id="area-2"> 15 <h2>ボックス2</h2> 16 <p>ここに本文が入ります</p> 17 <p>ここに本文が入ります</p> 18 <p>ここに本文が入ります</p> 19 <p>ここに本文が入ります</p> 20 </div> 21 <div class="box" id="area-3"> 22 <h2>ボックス3</h2> 23 <p>ここに本文が入ります</p> 24 <p>ここに本文が入ります</p> 25 <p>ここに本文が入ります</p> 26 <p>ここに本文が入ります</p> 27 <p>ここに本文が入ります</p> 28 <p>ここに本文が入ります</p> 29 <p>ここに本文が入ります</p> 30 <p>ここに本文が入ります</p> 31 </div> 32 <div class="box" id="area-4"> 33 <h2>ボックス4</h2> 34 <p>ここに本文が入ります</p> 35 <p>ここに本文が入ります</p> 36 <p>ここに本文が入ります</p> 37 <p>ここに本文が入ります</p> 38 <p>ここに本文が入ります</p> 39 <p>ここに本文が入ります</p> 40 <p>ここに本文が入ります</p> 41 <p>ここに本文が入ります</p> 42 </div> 43 </div><!-- コンテンツ --> 44 </div><!-- 左カラム --> 45 46 <!-- 右カラム --> 47 <div class="right"> 48 <!-- ヘッダー --> 49 <header class="header"> 50 <h1>ページタイトル</h1> 51 </header> 52 <!-- メニュー--> 53 <div id="menubtn"> 54 <img src="menu.png" alt="menu"> 55 </div> 56 <nav class="menu" id="menu"> 57 <ul> 58 <a href="#area-1" data-box=".scroll"><li>ボックス1</li></a> 59 <a href="#area-2" data-box=".scroll"><li>ボックス2</li></a> 60 <a href="#area-3" data-box=".scroll"><li>ボックス3</li></a> 61 <a href="#area-4" data-box=".scroll"><li>ボックス4</li></a> 62 </ul> 63 </nav> 64 <nav id="darkbtn"> 65 <div class="darkbtn"></div> 66 </nav> 67 </div><!-- 右カラム --> 68</div> 69 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 70 <script type="text/javascript" src="jquery.js"></script> 71</body>
css
1@charset "UTF-8"; 2/***** 通常色 *****/ 3:root { 4 --body-bg: #eeeeee; 5 --body-text: #000000; 6 --left-bg: #ffffff; 7 --box-bg: #cccccc; 8 --mode: url('moon.png'); 9 } 10 11/***** 全体的な *****/ 12body { 13 background: var(--body-bg) 14 color: var(--body-text); 15 transition: 0.3s; 16} 17ul { 18 list-style-type: none; 19} 20/*コンテンツ*/ 21.box{ 22 position: relative; 23 background-color: var(--box-bg); 24} 25 26/* -------------------------------- 27 * 768px～ 28 * -------------------------------- */ 29@media (min-width:768px) { 30 body{ 31 background: var(--body-bg); 32 } 33 /*２カラムレイアウト*/ 34 .wrapper{ 35 position: fixed; 36 margin: 0 10%; 37 width: 80%; 38 height: 100%; 39 } 40 .left{ 41 float: left; 42 width: 75%; 43 height: 100%; 44 background-color: var(--left-bg); 45 overflow-y: auto; 46 } 47 .right{ 48 float: left; 49 width: 25%; 50 height: 100%; 51 } 52 /*メニュー*/ 53 #menubtn{ 54 display: none; 55 } 56 .menu{ 57 width: 150px; 58 } 59 .menu li{ 60 display: block; 61 width: 150px; 62 background-color: var(--left-bg); 63 transition: 0.15s; 64 } 65 .menu li:hover{ 66 width: 180px; 67 } 68 /*ダークモードボタン*/ 69 #darkbtn{ 70 display: none; 71 } 72} 73/* -------------------------------- 74 * ～767px 75 * -------------------------------- */ 76@media (max-width:767px) { 77 /*レイアウト*/ 78 .right{ 79 position: absolute; 80 top: 0; 81 left: 0; 82 } 83 .left{ 84 position: absolute; 85 top: 100px; 86 left: 0; 87 width: 100%; 88 } 89 /*メニュー*/ 90 /*ダークモードボタン*/ 91 #menubtn, #darkbtn{ 92 position: fixed; 93 top: 10px; 94 padding: 5px; 95 width: 40px; 96 height: 40px; 97 text-align: center; 98 background-color: var(--box-bg); 99 border: 1px solid var(--body-text); 100 z-index: 1; 101 } 102 #menubtn{ 103 right: 10px; 104 } 105 #darkbtn{ 106 right: 60px; 107 } 108 i{ 109 font-size: 30px; 110 } 111 .menu{ 112 display: none; 113 position: fixed; 114 top: 0; 115 right: 0; 116 padding-top: 60px; 117 width: 100%; 118 background-color: var(--box-bg); 119 } 120 .darkbtn{ 121 background-image: var(--mode); 122 background-repeat: no-repeat; 123 width: 40px; 124 height: 40px; 125 } 126} 127/* -------------------------------- 128 * ダークモード 129 * -------------------------------- */ 130.dark-mode { 131 --body-bg: #000000; 132 --body-text: #ffffff; 133 --left-bg: #555555; 134 --box-bg: #888888; 135 --mode: url('sun.png'); 136 }
javascript
1const body = document.querySelector('body'); 2const icon = document.querySelector('.darkbtn'); 3 4const toggleMode = function(){ 5 body.classList.toggle('dark-mode'); 6 }; 7const changeDarkMode = function(){ 8 body.classList.add('dark-mode'); 9 }; 10const changeLightMode = function(){ 11 body.classList.remove('dark-mode'); 12 }; 13 14//操作後のダークモード設定を確認 15var mode = sessionStorage.getItem('mode'); 16if (mode === 'mode-dark') { 17 changeDarkMode(); 18 } 19 20//ダークモード切替ボタン 21icon.addEventListener('click', () => { 22 toggleMode(); 23 if (mode === 'mode-dark') { 24 sessionStorage.setItem('mode', 'mode-light'); 25 mode = 'mode-light'; 26 } else { 27 sessionStorage.setItem('mode', 'mode-dark'); 28 mode = 'mode-dark'; 29 } 30 }); 31 32$(function() { 33 // ハンバーガーメニュー 34 $("#menubtn").click(function(){ 35 $("#menu").slideToggle(); 36 }); 37 // アンカーリンク 38 $("a[href^='#']").click(function(){ 39 // 画面幅wideを取得 40 var wide = $(window).width(); 41 // if文で条件を比較（画面幅が768より小さいとき） 42 if (wide < 767) { 43 var adjust = -50; 44 var speed = 400; 45 var href= $(this).attr("href"); 46 var target = $(href == "#" || href == "" ? 'html' : href); 47 var position = target.offset().top + adjust; 48 $('body,html').stop().animate({scrollTop:position}, speed, 'swing'); 49 $("#menu").slideToggle(); 50 return false;} 51 // 画面幅が768より大きいとき 52 else { 53 var speed = 400; 54 var $box = $($(this).data("box")); 55 var $tareget = $($(this).attr("href")); 56 var dist = $tareget.position().top - $box.position().top; 57 $box.stop().animate({scrollTop: $box.scrollTop() + dist}, speed, 'swing'); 58 return false;} 59 }); 60});
試したこと
transitionをbodyではなく*に設定すると、ページ全体にtransitionが効くのですが、ハンバーガーメニューの開閉アニメーションがカクカクします。
さらに、元々transitionが効いていたダークモードボタンとハンバーガーメニューボタンはもっと切り替えが遅くなります。
回答1件
0
「slideToggle transition」でweb検索したら、transitionの対象がallだとslideToggleアニメーションがカクカクするので対象プロパティを設定すべし、とのことでした。
ダークモードで切り替えるのは文字色と背景のみなので、下記のコードで対応しました。
css
1* { 2 transition: 0.3s; 3 transition-property: color, background-color; 4}
ただし、なぜbodyにtransitionを設定してもダメなのかはわからないままです。
投稿2023/02/20 13:51
総合スコア1
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。