javascript - -webkit-transition 在使用 jQuery 进行转换时无效

Question

问题

我正在为类似于 this answer 的转换设置转换.在 Chrome 上，我发现当我在 transition 之前使用转换设置 css -webkit-transition 时，转换的转换不起作用(转换立即发生而不是超过 5 秒 - 稍后查看演示):

$img.css('-webkit-transition', '-webkit-transform 5s');        
$img.css('transition', 'transform 5s');//move this line before the previous line and it works

解决方法

但以下确实有效:

• 将第二行移到第一行之前。

• 注释掉第二行。

• 使用 JavaScript(我希望它能与 jQuery 代码完全一样，但它确实有效):

  img.style.setProperty("-webkit-transition", "-webkit-transform 5s");
  img.style.setProperty("transition", "transform 5s");
  

• 使用 css class 然后 addClass:

  .transformStyle
  {
      -webkit-transition: -webkit-transform 5s;
      transition: transform 5s;
      ....
  

演示

您可以看到这些不同案例的演示 here .

信息

当我在 Chrome 开发工具中针对 jQuery 案例查看 element.style 时，我得到:

-webkit-transform: perspective(400px) rotateX(30deg);

(根本没有过渡样式)。

对于带有注释行的 jQuery，我得到:

-webkit-transition: -webkit-transform 5s;
transition: -webkit-transform 5s;
-webkit-transform: perspective(400px) rotateX(30deg);

对于 JavaScript，我得到:

-webkit-transition: -webkit-transform 5s;
transition: -webkit-transform 5s;
-webkit-transform: perspective(400px) rotateX(60deg);

因此，似乎当我在 jQuery 中注释掉该行时，transform 设置为 -webkit-transform 即使我明确设置它，JavaScript 也会发生这种情况只是为了转换。

问题

• jQuery 案例发生了什么？为什么设置 $img.css('transition', 'transform 5s'); 导致根本没有过渡。为什么将此行移到 -webkit-transition 行之前会导致事情突然起作用？

• 为什么 JavaScript 的转换会自动设置为“-webkit-transform”？

要么是我遗漏了什么，要么是 Chrome/jQuery/JavaScript 正在做一些事情。我有一个使用 JavaScript 的解决方法，但我很想知道发生了什么，以防万一它可能会在 webkit/jQuery 的其他地方出现。我环顾四周并查看了 MDN page for transitions , 但没有找到任何东西。

Answer 1

按照你的第一个链接

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

您不能直接在您的 css 中使用转换，因为您需要通过某些事件更改它，即悬停，然后您也可以使用 javascript 在您的代码中获取转换。

上面的 css 可以正常工作，因为它会更改悬停事件的转换。