3

为了创建一些 swooshey 菜单，我正在尝试<li>使用 jQuery 在元素上设置 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");
  });
});

问题

The loops seem to work fine, and after much fiddling with Chrome's web inspector, it seems that when I try to set c.style.WebkitTransition to something, it works, but the property isn't stored. It does the same in the console (se here: http://cl.ly/Lbau)

I'm been playing around with this for the better part of half a day, so if anyone can help me out I'd be most appreciative!

Cheers.

4

1 回答 1

0

Transform isn't a supported animation property yet. Source

Take out the transform setting and it should set just fine.

于 2012-12-14T19:04:21.533 回答