自定义边栏动画播放一次,然后再也不播放

时间:2016-10-16 22:29:42

标签: jquery html css animation

因此,对于我的网站,我想要一个从左侧延伸出来的侧导航栏。它将来自(稍后将被更改,我知道这将是移动设备的绝对废话)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是一个小提琴,小提琴我甚至无法把它弄出去。

编辑:仍然不知所措,有人可以帮助我吗?所有相关的代码都在小提琴中,所以不仅仅是我发布的内容。

编辑:还在寻找。

0 个答案:

没有答案