这是我到目前为止所拥有的。
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 =“动画:skateOff缓入1秒前进”?)
..无论如何 然后在“滑板”动画化后,“导航”(这是侧边栏菜单)添加“ slideOut”类(使其从左侧滑出),并带有“ X”以关闭菜单滑出,这时单击,将删除“ slideOut”的“导航”类,并添加“ slideIn”的类。
这种处理方式似乎效率很低,并且像很多代码一样,我想知道是否有一种更简单的方法?切换可能?我已经研究过切换,但是由于“导航”元素的初始状态没有“ slideIn”或“ slideOut”类,因此我不确定它是否可以工作。
任何提示将不胜感激,感谢您的阅读,并祝您愉快。
答案 0 :(得分: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,这样讨论起来会更容易。