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

时间:2016-10-25 01:55:32

标签: javascript webkit webkit-transform webkit-transition

这些行:

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文字

没有任何结果

我需要使用webkitTransitionwebkitTransform

的方式有所改变

2 个答案:

答案 0 :(得分: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);')

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

答案 1 :(得分:0)

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

所以我改变了css:

span {
  display: inline-block;
}

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

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