使用javascript和jQuery .each（）循環應用CSS轉換屬性的問題

Question

為了創建一些swooshey菜單，我正在嘗試使用jQuery在<li>元素上設置CSS轉換屬性。 HTML看起來像這樣：

<ul class="main-nav">
  <li>
    <a href="#">Top Level 1</a>
    <ul class="main-nav-child">
      <li><a href="#">Second Level 1</a></li>
      <li><a href="#">Second Level 2</a></li>
      <li><a href="#">Second Level 3</a></li>
      <li><a href="#">Second Level 4</a></li>
      <li><a href="#">Second Level 5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Top Level 2</a>
    <ul class="main-nav-child">
      ...
    </ul
  </li>
</ul>

我正在嘗試將"transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease"轉換應用於.main-nav-child每個元素，其中XXX針對菜單中的每個項目增加。

我正在使用.each()循環迭代每個頂級列表項，然后在其中另一個迭代內部列表中的項。 我正在嘗試使用javascript設置轉換：

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    c.style.WebkitTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MozTransition    = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MsTransition     = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.OTransition      = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.transition       = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
  });
});

讀完這篇文章之后 ，我嘗試使用jQuery的.css方法：

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css({
      WebkitTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MozTransition    : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MsTransition     : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      OTransition      : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      transition       : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
    });
  });
});

我也嘗試使用CSS樣式而不是DOM樣式屬性名稱：

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css("-webkit-transition", "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease");
  });
});

問題

循環似乎工作得很好，並且在使用Chrome的Web檢查器之后，似乎當我嘗試將c.style.WebkitTransition設置為某些東西時，它可以正常工作，但該屬性不會存儲。 它在控制台中也是如此（請訪問： http ： //cl.ly/Lbau ）

我在半天的大部分時間都在玩這個，所以如果有人能幫助我，我會非常感激！

干杯。

Answer 1

Transform不是受支持的動畫屬性。 資源

取出變換設置，它應該設置得很好。