有没有更好的方法来添加/删除 Javascript 的菜单类答案

【问题标题】：Is there a better way to add/remove classes for menu with Javascript有没有更好的方法来添加/删除 Javascript 的菜单类
【发布时间】：2019-04-15 09:51:45
【问题描述】：

这是我目前所拥有的......

icons.addEventListener('click', (e)=>{
    if(e.target.className==="skate"){
        navigation.classList.remove('slideIn');
        navigation.classList.add('slideOut');
        skateboard.classList.add('skateOff');
        x.classList.add('xslide');
    }else{
        navigation.classList.remove('slideOut');
        navigation.classList.add('slideIn');
        skateboard.classList.remove('skateOff');
        x.classList.remove('xslide');
    }
})

    @keyframes skateOff{
    0%{
        transform:rotate(0);
    }
    50%{
        transform:rotate(49deg);
    }
    100%{
        transform: translateX(-300px);
    }
}

.skateOff{
    animation: skateOff  ease-in 1s forwards;
}

.x{
    visibility: hidden;
}

.xslide{
    animation:slideOut .8s ease 2s forwards;
}


.menu{
    visibility: hidden;
    color:black;
    width:10em;
    background-color:white;
    border-radius: 4px;
    font-family: 'Raleway';
    background: linear-gradient(to right,
    rgba(249,107,142,1),
    rgba(218,103,230,1),
    rgba(130,125,253,1));
}
.slideOut{
    animation: slideOut 1s forwards 1.2s;
}

@keyframes slideOut{
    0%{
        transform: translateX(-50%);
    }

    100%{
        visibility: visible;
        transform: translateX(0);
    }
}

.slideIn{
    animation: slideIn 2s ease forwards;

}

@keyframes slideIn{
    0%{
        visibility: visible;
        transform: translateX(0);
    }

    100%{
        transform: translateX(-150%);
    }
}

JS的功能是这样的，当单击“滑板”时，它会向左移动并且不再可见（skateOff 关键帧使这种情况发生，我添加了一个实现该动画的类，也称为“.skateOff”）

（最好不要单独的类，只添加

skateboard.style.animation="animation:skateOff ease-in 1s forwards"?)

..无论如何然后在“滑板”动画出“导航”（这是一个侧边栏菜单）之后添加“slideOut”类，使其从左侧滑出，以及“X”以关闭菜单滑出，当那是单击“导航”的“slideOut”类被删除，“slideIn”类被添加。

这种做事方式似乎效率低下，和很多代码一样，我想知道是否有更简单的方法来做这件事？切换可能？我已经研究过切换，但我不确定它是否会起作用，因为“导航”元素的初始状态没有“slideIn”或“slideOut”类。

我们将不胜感激任何提示，感谢您的阅读，祝您有美好的一天。

【问题讨论】：

嘿！欢迎！您可能会发现 codereview.stackexchange.com 是一个更好的地方，因为 Stack Overflow 是用于可定义的答案。一个问题的答案应该是“对”或“错”，但这样做的方法不止一种。如果我是你，我会考虑使用 JavaScript 框架，比如 VueJS。祝你好运。

标签： javascript html css

【解决方案1】：

首先，欢迎来到 Stack Overflow :)

您的代码可能会受益于classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList)。

你可以在那里有条件语句，意思是classList.toggle("string", boolean)，像这样：

icons.addEventListener('click', (e)=> {
  const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()

  navigation.classList.toggle('slideIn', !isSkate);
  navigation.classList.toggle('slideOut', isSkate);
  skateboard.classList.toggle('skateOff', isSkate);
  x.classList.toggle('xslide', isSkate);
});

可以在这里找到一点 PoC：https://codepen.io/tomekbuszewski/pen/XyNzqG

如果您需要更多帮助，请将您的代码发布到 CodePen 或 JSFiddle，这样会更容易讨论。

【讨论】：