One-way UI

非放出器変化要素(移動または移動しない)を含む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;
}

完成したアニメーション

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

あまり上手く行かなかったのはちょっと残念ですが何か見えました!