單擊某個按鈕時如何激活 animation？

Question


<!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)

我的 animation 基本上是從隱藏或不可見開始的，但是一旦用戶單擊按鈕，圖片就會顯示並滑動到特定的 position。 我一直在擺弄 animationPlayState 無濟於事，animation 永遠不會激活。

Answer 1

您的代碼中有一些沒有意義的東西（例如apple.document.getElementById ）。
您應該將蘋果的原始 position 添加到元素（不僅是動畫關鍵幀）。
該按鈕沒有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>

單擊某個按鈕時如何激活 animation？

問題描述

1 個解決方案

解決方案1
2 2020-04-03 23:45:52

單擊某個按鈕時如何激活 animation？

問題描述

1 個解決方案

解決方案1 2 2020-04-03 23:45:52

解決方案1
2 2020-04-03 23:45:52