如何使用简单的 JavaScript,无需切换类和 ID,无需 jQuery 和 jQuery 插件,重新制作 CSS3 动画,但是只能使用 JavaScript?在 CSS3 中,使用 @keyframes
非常简单,但是如何使用 JavaScript 做到这一点呢?代码是什么?
如何创建动画?
var start = document.getElementById("start");
start.style.animation = ... // I don't know what to do
start.style.animationname = ... //Or something like this?
我对 JavaScript 还很陌生。
UPD
我会尝试简单地描述一下,我需要什么:我需要一个div,当我点击它时,它必须向左移动+5px。但我读到,DOM 动画不太好,所以我询问了如何在 JavaScript 中使用类似 CSS3 的动画。
最佳答案
为什么不这样做:
var start = document.getElementById("start");
start.style.left = + 10 + 'px';
CSS:
#start{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
这会在 0.5 秒内将您的元素向右移动 10px。
编辑关于您的编辑:
为此,您可以这样做:
function move_left(current_pos){
var element = document.getElementById("start");
var start_left = element.style.left;
var end_pos = parseInt(start_left, 10) + 5;
if(current_pos != end_pos){
element.style.left = element.style.left + 1 + 'px';
current_pos = parseInt(element.style.left, 10);
return move_left(current_pos);
}else{
return 'finished';
}
}
关于javascript - 纯 JavaScript 类似 CSS3 的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17729786/