javascript中的Webkit转换语法
webkit transition syntax in javascript?
我在这里寻找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中预先定义它,我想动态地添加它,然后删除它
你可以使用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>
允许1ms的渲染得到线程返回
setTimeout(function() {
myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);
您可以使用:
element.style.webkitTransition = "set your transition up here"
我知道这是一个解决方案,但你可以使用jQuery吗?
$(moveingEl).css('-webkit-transform', 'translateX(200px)');
<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>
相关文章:
- 我可以将为java创建的语法文件转换为javascript的语法文件吗
- 将普通js转换为角度语法的快速方法
- 有没有一种简单的转换方法可以将chrome消息传递转换为safari消息传递语法
- 尝试理解$.inArray,或将$scope转换为“$scope”;控制器As”;AngularJS中的语法
- 在jsView中使用html转换器在语法上是错误的:data-link=“html{:p roperty}”而不是dat
- 如果我在常规语法旁边包含供应商前缀,转换是否会应用两次
- 在 Babel 中转换插件与语法插件
- JavaScript 将 #s 转换为字母时出现语法错误
- 正在转换为ES6语法
- Javascript正则表达式,用于将ruby哈希语法从1.8转换为1.9
- 如何在视频游戏应用程序中将@count语法转换为HTML
- 使用Gulp将jsx转换为js时出现React语法错误
- 将AJAX脚本转换为jQuery语法
- 默认情况下,BabelJS不会't可转换ES6语法的匿名函数
- 我需要一个Javascript文字语法转换器/deobfusation工具
- 尝试使用Javascript将字符串转换为对象,但在ie8中出现语法错误
- 将引号语法转换为HTML的正则表达式
- 如何将json的上下文无关语法转换为状态机
- AngularJS-使用控制器将语法转换为Browserfy
- 如何将Mathematica语法转换为latex