根据项目需求,展示隐藏侧边栏
<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>
效果如下: