Question

在“横幅”上方和上方对“栏”进行动画处理时，它似乎运作良好（尽管我希望横幅位于前面）。但是，主要问题是当我尝试将条形动画还原到其初始位置时，但是动画不复存在。它只是向下传送，而不会向下移动，因为该对象之前已经很好地向上移动。

为什么会这样，如何解决此问题？谢谢！

wmic process where name="explorer.exe" call terminate
RUNDLL32.EXE USER32.DLL,UpdatePerUserSystemParameters ,1 ,True

var active = false;

$("#banner").click(function() {
  if (active) {
    // show the bar and then "animate" it downward
    $("#bar").show().animate({
      translate: 0
    }, {
      duration: 500,
      step: function(pix) {
        $("#bar").css("transform", "translateY(" + pix + "px)");
      }
    });
  } else {
    // "animate" bar upward and hide it
    $("#bar").animate({
      translate: -1000
    }, {
      duration: 500,
      step: function(pix) {
        $("#bar").css("transform", "translateY(" + pix + "px)");
      },
      done: function() {
        $("#bar").hide();
      }
    });
  }
  active = !active;
});

body {
  background-color: black;
  color: white;
}

#banner {
  background-color: gray;
  padding: 20px;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
}

#bar {
  color: black;
  background-color: white;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

#bar p {
  margin: 0;
  padding: 20px;
}

说明：单击横幅开始动画。第一部作品；第二个没有。

Answer 1

因此非常容易，只需将（在属性下方）添加到#bar

transition: .5s transform ease;

让我知道这对您不起作用

对翻译进行动画处理是一种方法，但不是另一种方法吗？

1 个答案: