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

Question

這些行：

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

100％的工作時間不超過一年。 我拉下了非常陳舊的倉庫，向其中添加了另一個功能，但是當我查看該頁面時，比例尺不再起作用。 我將HEAD更改為正確，我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，它看起來像lodash函數_.extend({}, {...}) 。

我有另一個解決方案，像這樣：

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

也許看起來有點丑陋，但它可以工作。 希望對您有幫助。

Answer 2

解決了（某種）我正在轉換的元素是<span>元素，顯然不能進行轉換。

所以我改變了CSS：

span {
  display: inline-block;
}

並應用了變換。 現在的問題是， inline-block修改了我的元素的尺寸，這是我在這里問過的： 為什么將“內聯塊”強制尺寸應用於我的span元素？

不過，Chrome必須有所改變，因為一年前這些轉換確實可以用於<span>元素