因此,对于我的网站,我想要一个从左侧延伸出来的侧导航栏。它将来自(稍后将被更改,我知道这将是移动设备的绝对废话)0%宽度到15%宽度,然后在关闭时返回。动画应该是动画的简易,当我通过我写的javascript给侧边栏指定一个特定的类时,应用动画。
这就是我所拥有的,我相信它应该起作用(虽然它显然没有):
#sideNav{
height: 100%;
width: 0%;
background-color: #EDEFF0;
/*temporary for testing things*/
border-right: solid 0.25px black;
}
.sideNavOut{
animation: sideBarSlideOut 0.25s ease-in forwards;
}
.sideNavIn{
animation: sideBarSlideOut 0.25s ease-in backwards reverse;
}
@keyframes sideBarSlideOut {
0% {
width: 0%;
}
100% {
width: 10%;
}
}
这是我用来应用类并删除相反类的javascript(工作正常,使用JQuery因为我很懒)
$('#openIcon').click(function(){
if($('#sideNav').hasClass('sideNavOut')){
$('#sideNav').addClass('sideNavIn');
$('#sideNav').removeClass('sideNavOut');
} else {
$('#sideNav').addClass('sideNavOut');
$('#sideNav').removeClass('sideNavIn');
}
});
动画的问题是它是在第一次加载页面时运行的,所以它会运行发送它。之后,无论进入还是退出,动画都不会运行,只是自动更改宽度。
希望动画在设置为向后和反向时简单地向后播放。我知道我可以简单地创建另一个相同但向后的动画,但我想知道为什么在将来遇到类似问题时会出现这个问题。
有人可以对我的情况有所了解吗?
编辑:Here是一个小提琴,小提琴我甚至无法把它弄出去。
编辑:仍然不知所措,有人可以帮助我吗?所有相关的代码都在小提琴中,所以不仅仅是我发布的内容。编辑:还在寻找。