为什么 `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

解决了（有点）我正在转换的元素是 <span> 个元素，显然不能进行转换。

所以我改变了 css:

span {
  display: inline-block;
}

并应用了转换。现在的问题是 inline-block 修改了我的元素的尺寸，我在这里询问过：

不过，Chrome 中肯定发生了一些变化，因为一年前 <span> 元素的转换确实起作用了

Answer 2

我也有这个疑问。在我的情况下，有时我想根据 devicePixelRatio.So 缩放元素这是我的代码：

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。请注意parse a CSS declaration block step3，它看起来像lodash函数_.extend({}, {...})。

我有另一个解决方案，像这样：

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

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

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

Why doesn't `style.webKitTransition` and `style.webkitTransform` work anymore in Chrome?

javascript

webkit

webkit-transform

webkit-transition