使用 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"
  });
});

拥有read this，我尝试使用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 的网络检查器进行了很多摆弄之后，似乎当我尝试将 c.style.WebkitTransition 设置为某些东西时，它可以工作，但没有存储该属性。它在控制台中执行相同的操作（参见此处：http://cl.ly/Lbau）

我已经玩了半天的大部分时间，所以如果有人可以帮助我，我将不胜感激！

干杯。

Answer 1

Transform 尚不支持动画属性。 Source

取出变换设置，它应该设置得很好。