2

我怎样才能使用简单的 JavaScript，不切换类和 id，不使用jQuery和jQuery 插件，但仅使用 JavaScript 重新制作 CSS3 动画？在 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 的动画。

4

2 回答 2

5

为什么不这样做：

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 秒内将您的元素向右移动 10 像素。

编辑关于您的编辑：

为此，您可以这样做：

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';
    }       
}
于 2013-07-18T17:12:47.123 回答
2

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

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

查看：https ://github.com/sole/tween.js

于 2013-07-18T17:24:45.047 回答