0

这些行：

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？

4

2 回答 2

2

我也有这个问题。在我的情况下，有时我想根据 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 blockstep3，它看起来像 lodash 函数_.extend({}, {...})。

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

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

也许它看起来有点难看，但它有效。希望它会帮助你。

于 2018-07-06T07:17:28.647 回答
0

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

所以我改变了css：

span {
  display: inline-block;
}

并应用了变换。现在的问题是inline-block修改了我的元素的尺寸，我在这里问过：为什么将“内联块”强制尺寸应用于我的跨度元素？

不过，Chrome 中肯定发生了一些变化，因为<span>一年前这些转换肯定对元素起作用

于 2016-10-27T18:44:23.303 回答