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中找到了解释。请注意parse a CSS declaration block第3步，它看起来像lodash函数_.extend({}, {...})。

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

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

也许看起来有点丑陋，但它可以工作。希望对您有帮助。

Answer 2

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

所以我改变了css：

span {
  display: inline-block;
}

并应用了变换。现在的问题是inline-block修改了我的元素的维度，我在这里问过：Why does applying `inline-block` force dimensions onto my span element?

Chrome中的某些内容肯定已经改变，因为这些转换在一年前肯定适用于<span>个元素

为什么`style.webKitTransition`和`style.webkitTransform`在Chrome中不再有效？

2 个答案: