-webkit转换在后面跟着jQuery转换时没有效果

-webkit-transition has no effect when followed by transition with jQuery

本文关键字：转换 有效果 jQuery 在后面 -webkit      更新时间：2023-09-26

问题

我正在为类似于这个答案的转换设置转换。在Chrome上，我发现当我用转换将css -webkit-transition设置在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;
    ....

演示

您可以在此处看到这些不同案例的演示。

信息

当我在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中也会发生，尽管我明确地将其设置为仅transform。

问题

  • jQuery案例发生了什么？为什么设置$img.css('transition', 'transform 5s');会导致根本没有转换。为什么在-webkit-transition线之前移动这条线会导致事情突然发生变化？

  • 为什么JavaScript的transform会自动设置为"-webkit transform"？

要么是我遗漏了什么，要么是Chrome/jQuery/JavaScript在暗中做什么。我有一个变通办法，那就是使用JavaScript，但我很想知道发生了什么，以防webkit/jQuery在其他地方突然出现。我环顾四周，在MDN页面上查看了转换，但没有发现任何内容。

根据您的第一个链接

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将很好地工作，因为它改变了悬停时的转换事件。

相关文章：