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

Question

在我的 Android 使用 Crosswalk 的混合应用程序中，需要在运行时对 HTML 元素应用 CSS3 转换。我认为这是一项相对琐碎的任务，但发现它根本行不通。最初我怀疑这是因为规范的 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>

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

Answer 1

你有两个问题：

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

从值中删除 ; 并使用 transform 属性代替。

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

您也只需设置一次值。

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

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>

Answer 2

如果需要设置前缀 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>

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

CSS3 transform applied from JS does not work

html

javascript

css

css-transforms