JavaScript旋轉動畫

Question

我被困在一個點上。有10條直線。我想要的是第一條線旋轉40度后，第二條線應該開始旋轉，然后第三，第四，第五條等等！ ！

碼：

<div class="hair" onclick="rotate()">
    <img src="single.png" id="1" width="10" height="40">
    <img src="single.png" id="2" width="10" height="40">
    <img src="single.png" id="3" width="10" height="40">
    <img src="single.png" id="4" width="10" height="40">
    <img src="single.png" id="5" width="10" height="40">
    <img src="single.png" id="6" width="10" height="40">
    <img src="single.png" id="7" width="10" height="40">
    <img src="single.png" id="8" width="10" height="40">
    <img src="single.png" id="9" width="10" height="40">
    <img src="single.png" id="10" width="10" height="40">
</div>

使用Javascript：

function rotate(){
    for(var i=1;i<11;i++)
    {
        setInterval(function(){
            document.getElementById(i).style.WebkitTransitionDuration="1s";
            document.getElementById(i).style.webkitTransform = 'rotate(40deg)';
        },100)
    }
}

Answer 1

使用匿名函數時，您會遇到大多數人遇到的經典范圍/關閉/引用問題。 我已經回答了一段時間，並提供了大量有關實際發生的信息的信息（ 忽略答案的第一段，其余的答案仍然適用 ）。 同時，您的問題的答案是：

for(var i=1;i<11;i++)
{
    setInterval((function(myI)
    {
        return function()
        {
            document.getElementById(myI).style.WebkitTransitionDuration='1s';
            document.getElementById(myI).style.webkitTransform = 'rotate(40deg)';
        };
    }(i)),100);
}

請注意，您正在設置時間間隔：只要瀏覽器窗口保持打開狀態，就會每100毫秒調用一次回調。
您不會在任何地方存儲間隔ID，因此我將使用setTimeout或創建ID的（最好是非全局的）ID數組，以便可以執行clearInterval(intervalID[x]); 在需要的時候。

Answer 2

我會在現代的瀏覽器中這樣做，通過使用類將CSS和JS分開。 這是我自己的示例，它基於您的要求，使用通用的類box以及現代的工具和模式：

這是HMTL，我之所以使用div是因為您可以使用圖片或其他任何元素：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

保持CSS分開，您只需要使轉換速度與延遲匹配即可：

.box {
  width: 100px;
  height: 100px;
  margin: 40px;
  background: grey;
  -webkit-transition: -webkit-transform .3s linear;
}

.box.rotate {
  -webkit-transform: rotate(45deg);
}

和JS：

function rotate() {
  var elements = document.querySelectorAll('.box');
  [].forEach.call(elements, function(element, i) {
    setTimeout(function(){ element.classList.add('rotate'); },i*300);
  });
}

document.querySelector('.container')
        .addEventListener('click',rotate);

這是一個小演示： http : //jsbin.com/ofiral/1/edit

Answer 3

有幾個步驟可以解決您的問題：

HTML中的ID不能以數字開頭，因此請將其重命名為“ hair1”，“ hair2”等。

主要問題是由於setInterval，在函數運行時， i將不是您期望的i 。 這是因為范圍可變。 您可以使用匿名函數解決此問題。

將以上兩種方法結合起來可以得到以下代碼：

<div class="hair" onclick="rotate()">
  <img src="single.png" id="hair1" width="10" height="40">
  <img src="single.png" id="hair2" width="10" height="40">
  <!-- etc -->
</div>

// NOTE: This is not the final code listing, see below for a final answer. 
for (var i = i; i < 11; i++) {
  (function(local_i) {
    setInterval(function () {
      // use local_i instead of i inside this function for the results you expect
      document.getElementById('hair' + local_i).style.WebkitTransitionDuration='1s';
      document.getElementById('hair' + local_i).style.webkitTransform = 'rotate(40deg)';
    }, 100);
  })(i);
}

我還建議將樣式放入樣式表中，然后使用一個類來應用它們：

.rotate
{
  -webkit-transform: rotate(40deg);
  -webkit-transition: -webkit-transform 1s;
}

最后，要使元素連續而不是一起旋轉，您需要將間隔乘以i的值。 我認為您可能打算使用setTimeout而不是setInterval（setInterval將不斷重復運行）。

function rotate(){
  for(var i=1;i<11;i++) {
    (function (local_i) {
      setTimeout(function(){
        document.getElementById('hair' + local_i).classList.add('rotate');
      }, 100 * local_i);
    })(i);
  }
}

我在這里整理了一個演示

Answer 4

這不是一個完美的解決方案，但是您可以從中開始。

定義一個css3動畫並使用javascript進行分配。

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
.hair {
    position:relative;
}
.hair div {
    width:40px;
    height:40px;
    border-bottom: 1px solid #000;
    position:absolute;
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

。

function rotate() {
    for (var i = 1; i < 11; i++) {
        (function (x) {
            setInterval(function () {
                document.getElementById("d" + x).style.WebkitAnimationName = "rotation";
            }, 200 * i);
        })(i);
    }
}

rotate();

調整setInterval和animation-duration以獲得所需的結果。

Webkit演示： http : //jsfiddle.net/NQJJp/5/