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

Question

在我使用 Crosswalk 的 Android Hybrid 应用程序中，需要在运行时将 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 styles 属性，请使用cssText。

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

function transIt() {
  document.getElementById('blob').style.cssText = '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);';
}

#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>

---

或setAttribute()

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

function transIt() {
  document.getElementById('blob').setAttribute('style', '-webkit-transform: translate(100px,50px); transform: translate(100px,50px);');
}

#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>

---

根据评论更新

如果您已经设置了内联样式，例如在本示例中内联样式将背景设置为红色，则需要附加新的 CSS。

注意，确保; 字符串的开头有一个分号newCSS，以便正确分隔属性

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

function transIt() {
  var newCSS = ';-webkit-transform: translate(100px,50px); transform: translate(100px,50px)'
  document.getElementById('blob').style.cssText += newCSS;
}

#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' style="background: red;">&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

Answer 2

你有两个问题：

• CSS 中的分号 (;) 用于分隔 property:value 对。它不是价值的一部分。
• 供应商前缀属性用于实验性功能。它们不应在生产中使用。我的浏览器不再支持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>