Question

这是我到目前为止所拥有的。

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”类，因此我不确定它是否可以工作。

任何提示将不胜感激，感谢您的阅读，并祝您愉快。

Answer 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，这样讨论起来会更容易。

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

1 个答案: