Как активировать анимацию при нажатии определенной кнопки? - PullRequest
Новая
       10

Как активировать анимацию при нажатии определенной кнопки?

0 голосов
/ 04 апреля 2020 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <button id="button">Start Game</button>
  <img src="https://www.chelanfresh.com/wp-content/uploads/2018/11/apple.png" id="apple">

</body>
</html>


#button {
    min-width: 300px;
    min-height: 300px;
    color: #313133;
    }

#apple {
    height: 38%;
    width: 10%;
    margin-top: 27%;
    margin-left: 19%;
    visibility: hidden;
    animation-name: appleSlide;
    animation-duration: 3s; 
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: paused;
    animation-delay: 1s; 
}

@keyframes appleSlide {
    0% {margin-left: -50%;}
    100% {margin-left: 19%}
}



let apple = document.getElementById("apple")
let button = document.getElementById("button")

function activateAnimations() {
    apple.style.animationPlayState = "running";
    apple.style.visibility = "visible";
  }

button.addEventListener("click", activateAnimations)

Моя анимация в основном начинается скрытой или невидимой, но как только пользователь нажимает на кнопку, изображение появляется и скользит к определенной позиции c. Я возился с animationPlayState безрезультатно, и анимация никогда не активируется.

Ответы [ 2 ]

2 голосов
/ 04 апреля 2020
  1. В вашем коде есть несколько вещей, которые на самом деле не имеют смысла (например, apple.document.getElementById).
  2. Вы должны добавить исходную позицию яблока к элементу (не только к ключевому кадру анимации).
  3. Кнопка не имеет события activateAnimations.

Вот исправление для вашего кода: 

window.addEventListener("load", function() {
  let apple = document.getElementById("apple")
  let button = document.getElementById("button")

  function activateAnimations() {
      apple.style.animationPlayState = "running";
      apple.style.visibility = "visible";
    }

  button.addEventListener("click", activateAnimations)
});
#button {
    min-width: 300px;
    min-height: 300px;
    color: #313133;
    }

#apple {
    height: 38%;
    width: 10%;
    margin-top: 27%;
    margin-left: -50%;
    visibility: hidden;
    animation-name: appleSlide;
    animation-duration: 3s; 
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: paused;
    animation-delay: 1s; 
    animation-fill-mode: forwards;
}
@keyframes appleSlide {
    0% {margin-left: -50%;}
    100% {margin-left: 19%}
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <button id="button">Start Game</button>
  <img src="https://www.chelanfresh.com/wp-content/uploads/2018/11/apple.png" id="apple">

</body>
</html>
0 голосов
/ 04 апреля 2020

Попробуйте это
CSS: 


    #button {
    min-width: 300px;
    min-height: 300px;
    color: #313133;
    }

#apple {
    height: 38%;
    width: 10%;
    margin-top: 27%;
    margin-left: 19%;
    visibility: hidden;
}
.active
{
    visibility: visible;
    animation-name: appleSlide;
    animation-duration: 3s; 
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: paused;
    animation-delay: 1s; 
}
@keyframes appleSlide {
    0% {margin-left: -50%;}
    100% {margin-left: 19%}
}

JavaScript: 

let apple = apple.document.getElementById("apple")
let button = document.getElementById("button")

function activateAnimations() {
    apple.classList.add("active");
  }

button.addEventListener("click",activeAnimations,false);
...