javascript中的webkit转换语法？答案

【问题标题】：webkit transition syntax in javascript?javascript中的webkit转换语法？
【发布时间】：2011-11-16 16:47:43
【问题描述】：

我在这里寻找 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 中预定义它，我想动态添加它然后删除它。

【问题讨论】：

标签： javascript css webkit css-transitions

【解决方案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;  
}

&lt;div id="my-div"&gt;&lt;/div&gt;

【讨论】：

那不是我。不要以为它只是因为那条评论而被我否决了。感谢您的帮助，并投票反对这种负面影响，并表达我的感激之情。

【解决方案2】：

我知道这是一种解决方法，但是你可以使用 jQuery 吗？

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

【讨论】：

【解决方案3】：

允许 1 毫秒的渲染时间来获取线程。

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

【讨论】：

这对我来说非常有效，因为我尝试使用过渡设置动画。谢谢。
这不是一个可靠的解决方案。您应该改用window.requestAnimationFrame。

【解决方案4】：

你可以使用：

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

【讨论】：

【解决方案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>

【讨论】：