One-way UI

1.開始スタイルの作成

<!--html-->
<div class="black-bg please">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
</div>

/*CSS*/

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
}
/*visibility: hidden 은 애니메이션 만들 때 onClick 적용 버튼 누르기 전까지 display:none; 상태 만들어주는 것과 같은 원리*/


/*opacity: 0 (완전 투명)
opacity: 1 (불투명)
opacity: 1.5 (반투명)*/


.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

2.最終スタイルの作成

//Class탈부착해주는 걸로 만들예정

/*부착할 CSS*/
.please {
  visibility: visible;
  opacity: 1;
}

3.必要に応じて実行するJSコードの作成

<script>
      document.querySelector(".login").addEventListener("click", function () {
        document.querySelector(".black-bg").classList.toggle("please");
      });
      document.querySelector("#close").addEventListener("click", function () {
        document.querySelector(".black-bg").classList.toggle("please");
      });
</script>

4.遷移の追加

/*CSS*/
.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 700ms;
}

完成したアニメーション

番外:サンドイッチボタンを押すことでメニューからスライドできるアニメーションを作成