サイドバーのフェードインをjavascriptで実装
最近jsがかなり使いやすくなっている気がする
ソースコード
ロジックとしては、下記。
1.positionで最初は見えなくする 2.fadeInのクラスを作成 positionのtransitionを設置 3.クリックイベントでfadeInクラスをつける
toggleメソッドがめちゃ便利で、付けはずしをしてくれる
<style> body{ margin: 0; } .side-bar{ width: 100px; height: 100vh; background-color:red; position: absolute; left: -100px; transition: left 1s; } .fadeIn { position: absolute; left: 0; } .btn { margin: 0 200px } </style> </head> <body> <div class="container"> <section> <div class="side-bar"></div> <button class="btn">クリック</button> </section> </div> <script> let bar = document.querySelector(".side-bar") let btn = document.querySelector(".btn") btn.addEventListener("click", () => { bar.classList.toggle("fadeIn") }) </script> </body>