サイドバーのフェードインを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>
