switch開關

     

 

body{margin: 0; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background: rgba(44,91,110,1);} .container{width: 75px; height: 32px; background: rgba(255,255,255,.4);border: 2px solid #fff; border-radius: 18px; position: relative;} .item{display: block; height: 26px; width: 26px; border-radius: 15px; background: #fff;position: absolute; top: 1px; left: 1px;-webkit-transition: left .5s ease-out;transition: left .5s ease-out;} @-webkit-keyframes move{  0%{width: 26px; height:26px; top:3px;}  30%{width: 46px; height:16px; top:8px;}  100%{width:26px; height:26px; top:3px;} } @keyframes move{  0%{width: 26px; height:26px; top:3px;}  30%{width: 46px; height:16px; top:8px;}  100%{width:26px; height:26px; top:3px;} } @-webkit-keyframes moveL{  0%{width: 26px; height:26px; top:3px;}  40%{width: 46px; height:16px; top:8px;}  100%{width:26px; height:26px; top:3px;} } @keyframes moveL{  0%{width: 26px; height:26px; top:3px;}  40%{width: 46px; height:16px; top:8px;} 100%{width:26px; height:26px; top:3px;} } <div class="container">
  <div class="item"></div>
</div> var App={ createView:function(){ this.container=document.getElementsByClassName("container")[0]; this.item=document.getElementsByClassName("item")[0]; this.state=false; }, toggleIt:function(ev){ if(App.state){ App.item.style.left="1px"; App.item.style.animation="moveL .4s"; App.state=false; }else{ App.item.style.left="44px"; App.item.style.animation="move .4s"; App.state=true; } }, bindEv:function(){ this.container.addEventListener("click",this.toggleIt); }, init:function(){ this.createView(); this.bindEv(); } } App.init();