2018.7.23 放大缩小菜单

根据项目需求，展示隐藏侧边栏

<html>
  <head>
    <title>最小化动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <style>
    .wrap {
      position:relative;
      height:600px; 
    }
    .bigbox {
      width:400px; 
      height:600px; 
      background:gray; 
    }
    .box {
      position: absolute;
      width: 50px;
      height: 50px;
      background: pink;
      bottom: 0;
      left: 418px;
      cursor: pointer;
    }
    button {
      float: right;
      margin-right: 16px;
      margin-top: 10px;
      cursor: pointer;
    }
    .minimum {
      -webkit-animation: change .5s ease-in-out 1 alternate forwards;
        animation: change .5s ease-in-out 1 alternate forwards;    
    }
    @-webkit-keyframes change {
      from {
        width:400px; 
        height:600px; 
      }
      to {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 418px;
      }
    }
    @keyframes change {
      from {
        width:400px; 
        height:600px; 
        position: absolute;
        top: 0;
        left: 0;
      }
      to {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .maxmum {
      -webkit-animation: change-back .5s ease-in-out 1 alternate forwards;
        animation: change-back .5s ease-in-out 1 alternate forwards;    
    }
    @-webkit-keyframes change-back {
      from {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 418px;
      }
      to {
        width:400px; 
        height:600px; 
      }
    }
    @keyframes change-back {
      from {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
      }    
      to {
        width:400px; 
        height:600px; 
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  </style>
  <body>
      <div class="wrap">
          <div class="bigbox"> <button>最小化</button></div>    
          <div class="box"></div>
      </div>
  </body>
  <script type="text/javascript">

        document.getElementsByTagName("button")[0].onclick = function(){
            this.parentNode.classList.remove("maxmum");
            this.parentNode.classList.add("minimum");
        }

        document.getElementsByClassName("box")[0].onclick = function(){
          // document.getElementsByClassName("bigbox")[0].style.display = "block";
          document.getElementsByClassName("bigbox")[0].classList.remove("minimum");
          document.getElementsByClassName("bigbox")[0].classList.add("maxmum");
        }
      
  </script>
</html>

效果如下：

posted @ 2018-07-23 14:06  于小墨  阅读(117)  评论(0)    收藏  举报