反向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中完全设计菜单。