反向Javascript觸發CSS動畫

Question

這可能是一個愚蠢的問題，但我很掙扎。我想要一個由javascript觸發的小屏幕幻燈片導入菜單。這是我目前有：

HTML

<nav class="responsive"> 
    <ul class="nav-list unstyled"> 
    <li class="nav-item"><a href="#">Shop</a></li> 
    <li class="nav-item"><a href="#">Our Story</a></li> 
    <li class="nav-item"><a href="#">Information</a></li> 
    <li class="nav-item"><a href="#">Magazine</a></li> 
    <li class="nav-item"><a href="#">Contact</a></li> 
    </ul> 
</nav> 

SCSS

nav.responsive { 
    ul { 
    text-align: center; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
    transform: translateX(-100%); 
    background-color: #fafafa; 
    li { 
     a { 
     display: block; 
     padding: 12px; 
     border-bottom: 1px solid #dadada; 
     } 
    } 
    &.menu-list-active { 
     display: block; 
     animation: slide-in 0.5s forwards; 
    } 
    } 

    @media only screen and (min-width: 720px) { 
    ul { 
     display: block; 
     transform: none; 
     li { 
     display: inline-block; 
     a { 
      border-bottom: none; 
     } 
     } 
    } 
    } 

    div.nav-mobile { 
    display: block; 
    height: 48px; 
    width: 48px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background-color: #999999; 
    cursor: pointer; 
    &.menu-button-active { 
     background-color: #555555; 
    } 
    @media only screen and (min-width: 720px) { 
     display: none; 
    } 
    } 
} 

@keyframes slide-in { 
    100% { transform: translateX(0); } 
} 

的Javascript

// Create the mobile navigation toggle button 

var mobile = document.createElement('div'); 
mobile.className = 'nav-mobile'; 
document.querySelector('nav.responsive').appendChild(mobile); 

// Set some variables 

var mobileNav = document.querySelector('.nav-mobile'); 
var navList = document.querySelector('.nav-list'); 

// Handle showing the menu 
mobileNav.onclick = function() { 
    this.classList.toggle('menu-button-active'); 
    navList.classList.toggle('menu-list-active'); 
}; 

這很好，菜單正在滑入，如我所願。但是，我也希望它在單擊nav-mobile按鈕時再次滑出。我曾嘗試最初動畫ul，但這意味着當屏幕尺寸減小時，您會看到我不想要的菜單滑出。理想情況下，當頁面加載到一個小屏幕上時，菜單應該不可見。

有沒有辦法讓這個工作，因爲我想？

編輯

Codepen這裏：

http://s.codepen.io/mikehdesign/debug/wgLxYp/bZMQWyLvZYVA

Answer 1

您應該考慮使用的transition而不是animation這裏。下面是一個簡單的例子：

document.querySelector('div').addEventListener('click', function(){ 
 
    this.classList.toggle('active'); 
 
})

div { 
 
    width: 100px; 
 
    height: 200px; 
 
    background: red; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    transform: translateX(-100%); 
 
    transition: transform .4s; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: block; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    background: blue; 
 
} 
 

 
div.active { 
 
    transform: translate(0); 
 
}

<div>My Nav</div>

正如你所看到的，這並不相同類型的動畫和你的，但它可以被打斷。 Sidenote，使用:before或:after並單擊它將它標識爲JS中的父節點，因此您可以在純CSS中創建按鈕，並直接檢查包裝器上的點擊而不是包含在其中的鏈接（if(event.target === this){ ... Open and close ... }），它是一個有用的系統，可以減少HTML中的混亂程度，並在CSS中完全設計菜單。