逆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をアニメーション化しようとしましたが、それは画面サイズが縮小されたときに、私が望まないメニューをスライド表示することを意味します。ページが小さな画面に読み込まれるとき、メニューが表示されないようにするのが理想的です。

私が望むようにこれを動作させる方法はありますか？ここ

EDIT

Codepen：

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

Answer 1

代わりに、ここでanimationのtransitionを使用することを検討すべきです。ここでは簡単な例である：それは中断することができます以外

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のメニューを完全にデザインするのに便利なシステムです。