Question

我正在尝试创建一个窗口滚动功能，一旦超过某个点就弹出一个侧边栏，然后在回到该点之后将其弹出，但是我不希望能够提示动画为隐藏侧边栏，直到我超越了一次。我尝试添加一个在第一个事件发生时会改变的变量，然后是条件＆amp;＆amp; 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');
}

改变＆amp;＆amp;的变量条件javascript

1 个答案: