javascript - 从 JS 应用的 CSS3 转换不起作用

Question

在我使用 Crosswalk 的 Android 混合应用程序中，需要在运行时将 CSS3 转换应用于 HTML 元素。我认为这是一项相对琐碎的任务，但发现它根本行不通。最初我怀疑这是因为规范的 Crosswalk/Chromium 实现中缺少功能。但是，为了安全起见，我在我的桌面 Chrome 浏览器中做了很多相同的事情，如下所示

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  alert('Transforming now!');
  var blobStyle = document.getElementById('blob').style;
  blobStyle.webkitTransform = 'translate(100px,50px);';
  blobStyle.webkitTransform = 'translate(100px,50px);';
  alert('Did it work?');
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob'>&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

令我惊讶的是，这个相对简单的代码也没有在 Windows 上的 Chrome 中提供预期的结果。要么我在这里做错了我无法发现的事情，要么还有其他潜在的问题在起作用。也许这里有人有我没有的洞察力。

Answer 1

你有两个问题:

• CSS 中的分号 (;) 用于分隔 property:value 对。它不是值(value)的一部分。
• vendor 前缀属性用于实验 功能。它们不应在生产中使用。我的浏览器不再支持 webkitTransform，因为 transform 多年来一直很稳定。

从值中删除 ; 并改用 transform 属性。

  blobStyle.transform = 'translate(100px,50px)';

您也只需设置该值一次。

注意:通常最好在样式表中定义这些内容并改为切换类名。

document.getElementById('btn').addEventListener('click', transIt);

function transIt() {
  alert('Transforming now!');
  var blobStyle = document.getElementById('blob').style;
  blobStyle.transform = 'translate(100px,50px)';
  alert('Did it work?');
}

#main {
  position: relative;
  margin: auto;
  margin-top: 20%;
  height: 200px;
  width: 50%;
  border: 1px solid red;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1em;
}

#blob {
  position: absolute;
  border: 1px solid blue;
  background-color: blue;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

<div id='main'>
  <div id='blob'>&nbsp;</div>
</div>
<button id='btn'>Transform It</button>