更改&& conditions javascript的变量

Question

我正在尝试制作一个窗口滚动功能，一旦超过某个点，就会弹出一个侧栏，然后在返回到该点之后再弹出它，但我不想在经过该点之前，能够提示隐藏侧栏的动画。我尝试添加一个在第一个事件发生时会更改的变量，然后在if else语句中添加一个条件&&运算符

$(window).scroll(function () {
var y = $(this).scrollTop();
var z = 500;
var q = 1;

if (y >= z) {
    menu1.css("animation-play-state", "running");
    menu1.css("animation-direction", "normal");
    menu1.css("animation-fill-mode", "forwards");
    menu1.css("animation-name", "sidemenuanimation");
    q = 2;


}else if (y < z && q == 2){
    menu1.css("animation-name", "sidemenuanimation2");
}

});

关键帧：

 @keyframes sidemenuanimation {
0% {transform: translateX(0px);}
100% {transform: translateX(170px); }           
  }

  @keyframes sidemenuanimation2 {
from {transform: translateX(170px);}
to {transform: translateX(0px); }           
  }

这并没有产生我想要的结果

Answer 1

我建议不要使用动画，而是使用body元素上的类切换来实现过渡。(我假设您的菜单在下面的css中的id为menu )。然后，您可以添加一个过渡到css，使之成为“动画”。

CSS

#menu{
    transition:translateX 0.2s ease-in-out;
    transform:translateX(0);
}
.menu-open #menu{
    transform:translateX(170px);
}

JS

if (y >= z) {
    $(body).addClass('menu-open');
    q = 2;
}else if (y < z && q == 2){
    $(body).removeClass('menu-open');
}