javascript - 使用 javascript 和 jQuery .each() 循环应用 CSS 转换属性时出现问题

Question

为了创建一些 swooshey 菜单，我尝试在 <li> 上设置 CSS 过渡属性。使用 jQuery 的元素。 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

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