Медленный отказов Javascript - PullRequest
Новая
       8

Медленный отказов Javascript

0 голосов
/ 09 марта 2019

Я пытаюсь использовать замедление и заставить изображение медленно подниматься и опускаться. Я получил это работает, но есть «пропустить» в первом цикле. Вы можете увидеть это в действии на 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.

Ответы [ 2 ]

1 голос
/ 09 марта 2019

Вы можете достичь этого с помощью 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>
0 голосов
/ 09 марта 2019

Не используйте 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>
...