Question

问题

我正在设置类似于this answer的转换过渡。在Chrome上，我发现当我使用变换在-webkit-transition之前设置css 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类，然后使用addClass：

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

演示

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

信息

当我看到用于jQuery案例的Chrome开发工具中的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，即使我明确地将它设置为transform，也会发生在JavaScript中。

问题

jQuery案例发生了什么？为什么设置$img.css('transition', 'transform 5s');会导致根本没有转换。为什么在-webkit-transition行之前移动这一行会导致事情突然发生？
为什么转换会自动设置为＆＃39; -webkit-transform＆＃39;对于JavaScript？

要么我缺少某些东西，要么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可以正常工作，因为它改变了悬停事件的转换。

-webkit-transition在使用jQuery进行转换后没有任何效果

1 个答案: