javascript 中的 webkit 转换语法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7411305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit transition syntax in javascript?
提问by Philll_t
I'm looking for the webkitTransition object reference here
我在这里寻找 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";
}
This does not work.I would like to give the element a transition property, then make it move to the right. When this code is called it just immediately moves to the right with no animation. bummer :(. I don't want to predefine it in CSS, I would like to dynamically add it and then remove it.
这不起作用。我想给元素一个过渡属性，然后让它向右移动。当这个代码被调用时，它会立即向右移动，没有动画。无赖:(。我不想在 CSS 中预定义它，我想动态添加它然后删除它。
回答by 2grit
Use style.setProperty.
使用 style.setProperty。
moveingEl.style.setProperty("-webkit-transition", "left 5s linear");
moveingEl.style.setProperty("left", "200px");
回答by thomas-peter
Allow 1ms for the rendered to get the thread back.
允许 1ms 渲染以恢复线程。
setTimeout(function() {
myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);?
回答by hallodom
You can use:
您可以使用：
element.style.webkitTransition = "set your transition up here"
element.style.webkitTransition = "set your transition up here"
回答by Dhruv Dholakia
<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>
回答by captainclam
I know it's a workaround, but can you use jQuery?
我知道这是一种解决方法，但是您可以使用 jQuery 吗？
$(moveingEl).css('-webkit-transform', 'translateX(200px)');
