実現したいこと
ハンバーガーメニューを2回目以降クリックした際、展開されるメニューリストのちらつきを解消したい。
発生している問題・分からないこと
リンク内容https://warp.style/movie/share/3e5fe60f-ca0c-4396-a164-a6689653beaf
上記の動画が発生している現象です。（閲覧いただけない場合は申し訳ございません）
【 考えられる原因 】
・メニュー展開時opacityを0→1に
・1になったopacityは0に戻らず1のまま
・2回目以降展開する際に1のopacityが一瞬表示されてちらつきが発生
【わからないこと】
・メニューを閉じる時に1にしたopacityを0に戻す方法
・その他ちらつきを解消するための方法
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>test</title>7 <!-- リセットcss -->8 <link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css"> <link rel="stylesheet" href="./test.css">9 10<style>11/* 12ハンバーガーメニューの指定 13======================================= */14.hamburger {15 position: fixed;16 cursor: pointer;17 width: 50px;18 height: 50px;19 top: 4px;20 right: 15px;21 z-index: 999;22 }23.hamburger span{24 display: inline-block;25 position: absolute;26 background: rgb(70, 70, 70);27 transition: all .4s;28 border-radius: 2px;29 left: 14px;30 height: 2px;31 width: 45%;32}33.hamburger span:nth-of-type(1) {34 top:15px; 35}36.hamburger span:nth-of-type(2) {37 top:23px;38}39.hamburger span:nth-of-type(3) {40 top:31px;41}42.hamburger.active span:nth-of-type(1) {43 top: 18px;44 left: 12px;45 transform: translateY(6px) rotate(-315deg);46 width: 50%;47}48.hamburger.active span:nth-of-type(2) {49 opacity: 0;50}51.hamburger.active span:nth-of-type(3){52 top: 30px;53 left: 12px;54 transform: translateY(-6px) rotate(315deg);55 width: 50%;56}57/* 58メニューパネルの指定 59======================================= */60.main_nav {61 position: fixed;62 width: 100%;63 z-index: 9999;64}65/* メニューパネル */66.menu_panel {67 position: fixed;68 /*丸の形*/69 width: 100px;70 height: 100px;71 border-radius: 50%;72 background: #a9a9a9;73 /*丸のスタート位置と形状*/74 /*scaleをはじめは0に*/75 transform: scale(0);76 right:-50px;/* 開始位置 */77 top:-50px;/* 開始位置 */78 transition: 0.5s;/*0.6秒かけてアニメーション*/79 opacity: 0.8;80}81/*クラスが付与されたらscaleを拡大*/82.menu_panel.panelactive{83 transform: scale(40); 84}85.menu_list {86 opacity: 0;87 width: 100%;/* 全画面 */88 height: 100vh;/* 全画面 */89 color: rgb(245, 245, 245);/* 文字色 */90 position: relative;91}92.menu_list.listactive {93 opacity: 1;94}95.menu_list ul {96 position: absolute;97 top:50%;98 left:50%;99 transform: translate(-50%, -50%);100}101.menu_list li {102 opacity: 0;103 font-size: 2rem;104}105</style>106</head>107 108<body>109 <nav class="main_nav">110 <button class="hamburger"><!--ハンバーガーメニュー-->111 <span></span><span></span><span></span>112 </button>113 <div class="menu_panel"></div><!--メニューパネル-->114 <div class="menu_list"><!--メニューリスト-->115 <ul>116 <li class="menu_link"><a href="#">menu1</a></li>117 <li class="menu_link"><a href="#">menu2</a></li>118 <li class="menu_link"><a href="#">menu3</a></li>119 <li class="menu_link"><a href="#">menu4</a></li>120 </ul>121 </div>122 </nav>123 124<script>125 const hamburger = document.querySelector('.hamburger');126 const menuList = document.querySelector('.menu_list');127 const menuPanel = document.querySelector('.menu_panel');128 const menuItems = document.querySelectorAll('.menu_list li');129 const menuLinks = document.querySelectorAll('.menu_link');130 131 // メニューを開く132 hamburger.addEventListener('click', () => {133 hamburger.classList.toggle('active');134 menuPanel.classList.toggle('panelactive');135 menuList.classList.toggle('listactive');136 137 // メニュー項目を上から順に遅延させて表示138 menuItems.forEach((hoge01, hoge02) => {139 hoge01.animate(140 {141 opacity: [0, 1],142 translate: ['2rem', 0],143 },144 {145 duration: 1500,146 delay: 300 * hoge02,147 fill: 'forwards',148 }149 );150 });151});152</script>153 154</body>155</html>
試したこと・調べたこと
上記の詳細・結果
定数.classList.toggle('menu_close');
等で閉じる際のクラスを付与してみたのですが、コードが間違っているのか効きませんでした。
展開されるメニューページそのものを開くと閉じるで2つ用意すれば問題ないかと思いますが、開閉ボタンを1つのハンバーガーメニュで完結させたいです。
補足
初学者です。
冗長で散らかったコード、申し訳ございません。
厳しいご指摘などもございましたら是非よろしくお願いいたします。
0 コメント