反向的css动画,反向Javascript触发CSS动画

这可能是一个愚蠢的问题，但我很挣扎。我想要一个由javascript触发的小屏幕幻灯片导入菜单。这是我目前有：反向Javascript触发CSS动画

HTML

• Shop
• Our Story
• Information
• Magazine
• Contact

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这里：

+0

您应该在这里使用'transition'而不是'animation'，这将解决您的问题。所以'动画：幻灯片.5s'应该只是你自己的ul上的'transition：transform .4s'。然后它总是整洁地过渡动画。 –