#8-选单华丽开起来！超简单！（animation-delay）

昨天做完了会动的汉堡动画传送门
今天来开关侧边栏吧！
当然只要控制 width0 —> 100% 就可以让侧边栏从左边推进来，
但今天来多一点点特效，先来看成果：

原理超简单，跟昨天的汉堡一样点击之後切换Class (.open / .close)
用伪元素做两层不同颜色，然後控制宽度让他们开阖，
再利用animation-delay就可以做出延迟的颜色渐层感啦！

直接上Code:

//html
<div class="side-container">
  <div class="item">About</div>
  <div class="item">Portfolio</div>
  <div class="item">Q & A</div>  
</div>

//SCSS
// Side Container
.side-container{
  width: 0%;
  height: 100%;
  background: rgba(255,255,0,1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  
  &:before, &:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: -1;
  }
  
  &:before{
    background: rgba(247, 202, 24, 1);
  }
  &:after{
    background: rgb(255,99,71);
  }
  
  
  .item{
    margin: 20px;
    opacity: 0;
    transform: translateY(-30px);
  }
  
  //打开class
  &.open{
    display: flex;
    animation: width 0.3s ease-in-out forwards 1;
    animation-delay: 0.3s;
    
    .item{
      opacity: 0;
      transform: translateY(-30px);
      animation: fade-in 0.3s ease-in-out forwards;
      animation-delay: 0.6s;
    }

    &:before{
      animation: width 0.3s ease-in-out forwards;
      animation-delay: 0.4s;
    }
    
    &:after{
      animation: width 0.3s ease-in-out forwards;
      animation-delay: 0.5s;
      
    }
  }
  
  //关起来的class
  &.close{
    display: flex;
    width: 100%;
    animation: width-close 0.3s ease-in-out forwards;
    animation-delay: 0.2s;
    
    .item{
      opacity: 1;
      transform: translateY(0px);
      animation: fade-out 0.3s ease-in-out forwards;
      // animation-direction: reverse;
      animation-delay: 0.2s;
    }
    
    
    &:before{
      width: 100%;
      animation: width-close 0.3s ease-in-out forwards;
      animation-delay: 0.1s;
      
    }
    &:after{
       width: 100%;
      animation: width-close 0.3s ease-in-out forwards;
      
    }
  }
  
}

@keyframes width{
  to{
    width: 100%;
  }
}

@keyframes fade-in{
  from{
    opacity: 0;
    transform: translateY(-30px);
    
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes width-close{
  from{
    width: 100%;
    display: flex;
  }
  to{
    width: 0%;
    display: none;
  }
}

@keyframes fade-out{
  to{
    opacity: 0;
  }
}

//JS
const menuIcons = document.querySelector('.menu-icon')
const sideContainer = document.querySelector('.side-container')

let isMenuOpen = false;

menuIcons.addEventListener('click',()=>{
  isMenuOpen = !isMenuOpen
  isMenuOpen ? menuIcons.classList.add('open') : menuIcons.classList.remove('open')
  if(isMenuOpen){
    sideContainer.classList.remove('close')
    sideContainer.classList.add('open')
    
    
  } 
  if(!isMenuOpen ){
      sideContainer.classList.add('close')
      sideContainer.classList.remove('open')
      
    }
    
})

以上！

今天的code放在这里儿
一样有任何问题或错误欢迎批评指教！