这些行:
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
?
答案 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>
个元素