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>

Answer 2

允许1ms的渲染得到线程返回

setTimeout(function() {
    myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);​

Answer 3

您可以使用:

element.style.webkitTransition = "set your transition up here"

Answer 4

我知道这是一个解决方案，但你可以使用jQuery吗?

$(moveingEl).css('-webkit-transform', 'translateX(200px)');

Answer 5

<script>
        $(document).ready(function(){
                var x = 100;
                var y = 0;
            setInterval(function(){
                x += 1;
                y += 1;
                var element = document.getElementById('cube');
                element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
                element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
            },50);
            //for other browsers use:   "msTransform",    "OTransform",    "transform"
        });
    </script>