Question

如果没有 jQuery 和 jQuery插件，我可以使用简单的JavaScript，不切换类和ID，重新制作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的动画。

Answer 1

为什么不这样做：

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

这会将你的元素10px向右移动0.5秒。

关于您的修改的

修改：

要做到这一点，你可以这样做：

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';
    }       
}

Answer 2

要设置动画，您需要定义一个起始状态，一个目标（或已完成）状态和一个缓动函数来控制变化率。

我建议利用现有的解决方案，而不是从头开始，有很多代码可以帮助你做到这一点。

退房：https://github.com/sole/tween.js

纯JavaScript类似CSS3的动画

2 个答案: