javascript中的webkit转换语法？

我在这里寻找WebKittTransition对象引用

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

}

这不起作用。我想给元素一个transition属性，然后让它向右移动。调用此代码时，它会立即向右移动，没有动画。bummer:（.我不想在CSS中预定义它，我想动态添加它，然后删除它。

您可以使用它的CSS名称作为字符串来修改任何属性，包括

-moz-*

和

-webkit-*

属性

const style=document.getElementById（'my-div'）.style
常量属性=（k，v）=>style.setProperty（k，v）
函数bounce（）{
道具（“-webkit过渡”，“top.5s易用”）；
道具（“顶部”、“50px”）；
设置超时（（）=>{
道具（“-webkit transition”，“top.75s立方贝塞尔（0.390,0.575,0.565,1.000）”）；
道具（“顶部”、“0px”）；
}, .5 * 1000)
}
道具（“-webkit过渡”，“top.5s易用”）；
设置间隔（反弹，（.75+.5）*1000）；

#我的div{
背景：红色；
边界半径：50%；
宽度：50px；
高度：50px；
位置：绝对位置；
顶部：0px；
}

---

我知道这是一种变通方法，但您能使用jQuery吗

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

---

让渲染线程返回1毫秒

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

您可以使用：

element.style.webkitTransition=“在此处设置转换”

$（文档）.ready（函数（）{
var x=100；
var y=0；
setInterval（函数（）{
x+=1；
y+=1；
var元素=document.getElementById（'cube'）；
element.style.webkitttransform=“translateZ（-100px）rotateY（+x+”deg）rotateX（+y+”deg）”；//用于safari和chrome
element.style.MozTransform=“translateZ（-100px）rotateY（+x+”deg）rotateX（+y+”deg）”；//用于firefox
},50);
//对于其他浏览器，请使用：“msTransform”、“OTransform”、“transform”
});

那不是我，伙计。不要以为这只是因为我的评论就被我否决了。我感谢你的帮助并投票反对这一负面评论，并表示我的感谢。这对我来说非常有效，当我尝试用转换设置变换动画时。谢谢。这不是一个可靠的解决方案。你应该使用

window.requestAnimati改为onFrame

。

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