[jquery]で簡単なアニメーション(css)

2770 ワード
TIL CSS jquery テキストリンク
transformを使用すると、他の要素を使用するよりもスムーズなアニメーション効果が得られます.
loginボタンをクリックすると、上のmodalウィンドウが軽く下がり、見えます.
  • css 
    • 
.test{
  width: 100%;
  height: 100%;
  transition: all 1s;
  transform: translateY(-1000px);
  display: block;
  //모달창이 항상 보이게 block을 주고 
  //안보이게 transform으로 `-1000px`을 주었다.

}
  • html 
    •      $("#loginBtn").click(function () {
    
        $(".test").css("transform", "translateY(0px)");
      });
    でもここでcloseキーを押してLOGINキーを押すと見えなくなります!
    元々CLOSEボタンにfadeout属性が使用されていたため、自動的にdisplay:noneに入ります.なのでLOGINボタンを押してもnoneのコードは削除されていないので見えません…!

    🖱 変換の適用



    なぜtransitionを使うのですか?


    変換はJavaScriptとは独立しています.Javascriptパブリケーションを使用すると、複雑なアニメーションには骨が折れるかもしれません.(フレーム数を下げる)なのでSPAでWebを作成すると、JavaScriptに動画を入れるようになります!
    2021_03_19
    Firebase:良い、悪い、素晴らしい.