Question

因此，对于我的网站，我想要一个从左侧延伸出来的侧导航栏。它将来自（稍后将被更改，我知道这将是移动设备的绝对废话）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 个答案: