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

时间:2018-11-12 16:20:03

标签: javascript html css

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

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

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

1 个答案:

答案 0 :(得分:1)

首先,欢迎您使用Stack Overflow:)

您的代码可能会受益于classList.togglehttps://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,这样讨论起来会更容易。