未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

サイドバーのフェードインをjavascriptで実装

サイドバーのフェードインをjavascriptで実装

最近jsがかなり使いやすくなっている気がする

f:id:everydayProguramming:20201117034902p:plain

f:id:everydayProguramming:20201117034916p:plain

ソースコード

ロジックとしては、下記。

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>