javascript - 为什么 `style.webKitTransition` 和 `style.webkitTransform` 在 Chrome 中不再起作用？

Question

这些行:

numberElement.style.webkitTransition=".1s ease-in-out";
numberElement.style.webkitTransform="scale(2.0)";

100% 的工作时间不超过一年。我删除了非常陈旧的存储库以向其添加另一个功能，但是当我查看该页面时，规模不再起作用。我将 HEAD 更改为正确的提交位置，我确信它正在工作，但 scale 仍然不起作用。

在运行时检查元素，这就是我所看到的

<span id="minute-number" style="transition: 0.1s ease-in-out; transform: scale(2.0);">TEST</span>

但从视觉上看，TEST 文本没有发生任何变化

我需要使用 webkitTransition 或 webkitTransform 的方式是否发生了变化？

Answer 1

我也有这个问题。 在我的情况下，有时我想根据 devicePixelRatio 缩放元素。所以这是我的代码:

var ele = document.getElementById('my-id');
ele.style.transform = 'scale(xxx)';
ele.style.webkitTransform = 'scale(xxx)';

没成功。
所以我在终端中控制台 ele.style 。正如我们所知，它将控制台一个 CSSStyleDeclaration 对象。但是，属性 webkitTransform 不会显示在 CSSStyleDeclaration 对象中。
事实上，当您编写 ele.style.webkitTransform = xxxx 代码时，由于 CSSStyleDeclaration 对象没有属性 webkitTransform，因此无法工作。

我在官方文档中找到了解释，CSS Declaration Blocks 。请注意解析CSS声明 block 第3步，它看起来像lodash函数_.extend({}, {...})。

我有另一个解决方案，如下所示:

ele.setAttribute('style', ele.style.cssText + '-webkit-transform:scale(1);')

也许它看起来有点难看，但它确实有效。 希望对您有帮助。