javascript - javascript 中的 webkit 转换语法？

Question

我在这里寻找 webkitTransition 对象引用

 function spawnAnimation(what){
    //sets the moving element
    var moveingEl = document.getElementById(what);
    //gives temp transition property
    moveingEl.style.WebkitTransition = "left 2s";
   // moveingEl.style.webkitTransition = "top 500ms";

   var cLeft = moveingEl.style.left
   var cleft = Number(cLeft.slice(0, -2));

    var cTop = moveingEl.style.top
   var cTop = Number(cTop.slice(0, -2));

   moveingEl.style.left = cLeft+200 + "px";

}

这行不通。我想给元素一个过渡属性，然后让它向右移动。调用此代码时，它会立即向右移动，没有动画。真可惜:(。我不想在 CSS 中预定义它，我想动态添加它然后删除它。

Answer 1

您可以使用 style.setProperty使用其 CSS 名称作为字符串修改任何属性，包括 -moz-* 和 -webkit-* 属性。

const style =  document.getElementById('my-div').style
const prop = (k, v) => style.setProperty(k, v)

function bounce() {
  prop("-webkit-transition", "top .5s ease-in");
  prop("top", "50px");
  setTimeout(() => {
    prop("-webkit-transition", "top .75s cubic-bezier(0.390, 0.575, 0.565, 1.000)");
    prop("top", "0px");
  }, .5 * 1000)
}

prop("-webkit-transition", "top .5s ease-in");
setInterval(bounce, (.75 + .5) * 1000);

#my-div {
  background: red;
  border-radius: 50%;
  width:50px;
  height:50px;
  position:absolute;
  top: 0px;  
}

<div id="my-div"></div>