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

Question

以下几行:

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

100%工作不超过一年。我拉下了非常陈旧的repo来添加另一个功能，但是当我查看页面时，秤不再工作了。我把我的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声明块中找到了解释。请注意parse a CSS declaration block step3，它看起来像_.extend({}, {...})的lodash函数。

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

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

也许它看起来有点丑，但它工作。

Answer 2

解决了我正在转换的元素是<span>元素，它显然不能进行转换。

所以我改变了css:

span {
  display: inline-block;
}

，并应用变换。现在的问题是，inline-block修改了我的元素的尺寸，我在这里问过:为什么应用"内联块"力尺寸到我的跨度元素?

在Chrome中一定发生了一些变化，因为一年前<span>元素的转换肯定有效