為什么 setinterval animation 不起作用？

Question

我嘗試使用 setInterval 和一個改變樣式屬性的 function 創建貓的 animation。 然而，這不起作用。 沒有 animation。 而且我已經正確完成了所有操作，所以我不知道為什么它不起作用。

<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Catwalk</title>
        <style>
            #cat {
                position: absolute;
                left: 0px;
            }
        </style>
    </head>
    <body>
    <div>
        <!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
        <img id="cat" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
    </div>

  <script>
  var catEl = document.getElementById("cat");

  function walkTheCat(){
      catEl.style.left=parseFloat(catEl.style.left)+40+"px"
  };
  setInterval(walkTheCat,1000)
  </script>

    </body>
</html>```

Answer 1

最簡單的解決方案是使用計數器。 left = left + 40這將確保貓在屏幕上動畫。

var left = 0;
function walkTheCat() {
  catEl.style.left = left;
  left = left + 40;
};

setInterval(walkTheCat, 1000)

我錄制了一個截屏視頻，向您展示了我是如何解決這個問題的。 您可以在此處找到解決方案的亮點。

catEl.style.left不提供 css 屬性。 看我嘗試在這里記錄它。

您可以通過檢測圖像何時中斷window.innerWidth來循環貓。 在這里看到我的循環貓。

Answer 2

由 CSS 設置的 Styles 不會出現在元素的樣式屬性中。 要使其正常工作，請將其更改為對left使用內聯樣式或使用getComputedStyle 。 我個人認為使用內聯樣式更簡單：

<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Catwalk</title>
    </head>
    <body>
    <div>
        <!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
        <img id="cat" style="left:0px" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
    </div>

....

為什么 setinterval animation 不起作用？

問題描述

2 個解決方案

解決方案1
2 2020-05-12 23:57:21

解決方案2
0 2020-05-12 23:28:07

為什么 setinterval animation 不起作用？

問題描述

2 個解決方案

解決方案1 2 2020-05-12 23:57:21

解決方案2 0 2020-05-12 23:28:07

解決方案1
2 2020-05-12 23:57:21

解決方案2
0 2020-05-12 23:28:07