从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中的分号（;）用于分隔property:value对。它不是价值的一部分。
• 供应商前缀属性用于实验功能。它们不应该用于生产。我的浏览器不再支持webkitTransform，因为transform已经稳定了很长时间。

从值中删除;，然后使用transform属性。

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

您还需要设置值一次。

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

＆＃13;

＆＃13;

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?');
}

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您需要设置带前缀的CSS styles属性，请使用cssText。

＆＃13;

＆＃13;

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

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

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或setAttribute()

＆＃13;

＆＃13;

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

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

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

根据评论进行更新

如果你已经设置了内联样式，就像在这个样本中内联样式将背景设置为红色一样，你需要附加新的CSS。

请注意，请确保在;字符串的开头有分号newCSS，因此属性已正确分隔

＆＃13;

＆＃13;

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;
}

＆＃13;

#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);
}

＆＃13;

<div id='main'>
  <div id='blob' style="background: red;">&nbsp;</div>
</div>
<button id='btn'>Transform It</button>

＆＃13;

＆＃13;

＆＃13;