昨天做完了會動的漢堡動畫傳送門
今天來開關側邊欄吧！
當然只要控制 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放在這裡兒
一樣有任何問題或錯誤歡迎批評指教！