我正在尝试为 div 在 JavaScript 中水平移动 200px 设置动画。
下面的代码让它跳跃像素，但是有没有办法让它看起来像动画而不使用jQuery？
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
【问题讨论】：
标签： javascript animation
这是一个基本的动画设置：
function animate(elem,style,unit,from,to,time) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
elem.style[style] = (from+step*(to-from))+unit;
if( step == 1) clearInterval(timer);
},25);
elem.style[style] = from+unit;
}
使用方法：
animate(
document.getElementById('challengeOneImageJavascript'),
"left","px",0,200,1000
);
此示例将动画给定元素，使其在 1 秒（1000 毫秒）的时间内从 0px 线性滑动到 200px。
【讨论】：
document.getElementById('...').style.left = '200px';，它会自动动画。
您可以通过CSS3-Transition 轻松做到这一点：
#challengeOneImageJavascript {
-webkit-transition: left .2s;
-moz-transition: left .2s;
-o-transition: left .2s;
transition: left .2s;
}
不过，IE9 及更早的浏览器版本不支持它。
【讨论】：
transition 对我来说很流畅，Javascript setInterval（无论多么小）总是给出不稳定的结果。
我进行了大量研究，终于学会了如何做得很好。
我喜欢将我的程序放在 window.onload 函数中，这样在页面加载完成之前它不会运行代码。
要制作动画，请创建一个函数（我将其称为绘图函数）并调用它除了保留字之外的任何你想要的，然后在绘图函数的最后调用 requestAnimationFrame 函数并给它函数的名称将在下一帧调用。
必须先声明 requestAnimationFrame 函数，然后才能使用它。
请看下面的代码：
window.onload = function() {
function draw() { // declare animation function
context.fillStyle = "white";
context.fillRect(0, 0, 400, 400);
requestAnimationFrame(draw); // make another frame
}
var requestAnimationFrame = // declare the
window.requestAnimationFrame || // requestAnimationFrame
window.mozRequestAnimationFrame || // function
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
draw(); // call draw function
}注意：调用draw函数的那行之后什么都不会运行，所以你需要把你想运行的所有东西都放在调用draw函数的那一行之前。
【讨论】：
您必须使用 javascript 超时功能，并一次更改一点 css 值。最简单的方法是每次增加一个设定的量，直到达到阈值，这会给你一个线性动画，与 jQuery 的默认 swing 动画相比，它看起来笨重和业余，它遵循一个近似像 s 的贝塞尔曲线-曲线。
未经测试的代码应该做线性动画
var lefty = 0;
var animate = function(){
lefty += 20;
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = lefty +"px";
if(lefty < 200)
setTimeout(animate(),100);
}
animate()
n.b.对该代码块有很多改进，但它应该能让你继续前进......
【讨论】：
使用 JavaScript，您将不得不使用 setInterval 函数，或者在 jQuery 中可以这样做：
$('#challengeOneImageJavascript').animate({left: '=-5'});
Adust 值 (5) 根据您的需要以及通过=- 或=+ 指示的方向
使用原生 JavaScript：
var interval;
var animate = function(id, direction, value, end, speed){
var div = document.getElementById(id);
interval = setInterval(function() {
if (+(div.style) === end) {
clearInterval(interval);
return false;
}
div.style[direction] += value; // or -= as per your needs
}, speed);
}
你可以像这样使用它：
animate('challengeOneImageJavascript', 'left', 5, 500, 200);
要随时停止动画，您可以：
clearInterval(interval);
注意： 这只是一个非常快速的方法，可以给你一个想法。
【讨论】：
通过 css 的最简单方法。
https://jsfiddle.net/pablodarde/5hc6x3r4/
translate3d 使用在 GPU 上运行的硬件加速。 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
HTML
<div class="movingBox"></div>
CSS
.movingBox {
width: 100px;
height: 40px;
background: #999;
transform: translate3d(0,0,0);
transition: all 0.5s;
}
.moving {
transform: translate3d(200px,0,0);
background: #f00;
}
JavaScript
const box = document.getElementsByClassName('movingBox')[0];
setTimeout(() => {
box.className += ' moving';
}, 1000);
【讨论】：
CustomAnimation 是一个用纯js编写的用于动画html元素的小库。你可以使用这个库。
【讨论】：