缓慢的弹跳JavaScript

Question

我正在尝试使用宽松，使图像慢慢上下。我让它起作用，但是第一个循环中有一个"跳过"。您可以在https://culturehog.com上看到它的操作，这是我的代码：

// Bounce
function pushDavidUp() {
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(-50px)'
  });
  setInterval(pushDavidDown, 5000);
}
function pushDavidDown() {
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(50px)'
  });
  setInterval(pushDavidUp, 5000);
};
pushDavidDown();

我怀疑这是我使用CSS的方式，但是想知道我是否可以用JS进行补偿。

Answer 1

您可以使用CSS keyframes实现此目标。确保添加各自的供应商前缀。请参阅下面的代码：

.container{
  height: 1000px;
  width: 1000px;
  display: flex;
  align-items:center;
  justify-content: center;
}
.david{
    animation: upDown 5s ease-in-out alternate infinite;
    transform : translateY(0px)
}
@keyframes upDown{
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(50px);
  }
}

<div class="container">
  <img class="david" src="https://culturehog.com/images/david.png">
</div>

Answer 2

不要使用 setInterval()，因为它会将您传递的方法称为参数，每个 N毫秒（在您的情况下5000），因此您将在一段时间后以多个调用对同一功能的多个调用。解决此问题的一种解决方案将在事件中使用侦听器 transitionend互相调用您的功能，例如：

function pushDavidUp()
{
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(-50px)'
  });
  
  $("#david").one(
    'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    pushDavidDown
  );
}
function pushDavidDown()
{
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(50px)'
  });
  $("#david").one(
    'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    pushDavidUp
  );
};
$(document).ready(function()
{
    pushDavidDown();
});

#david {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: skyblue;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 25%;
  top: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="david">DAVID</div>