javascript - 如何从a点到b点动画？

Question

如何使用纯 JavaScript 将图片从 a 点动画到 b 点。如果没有，我可以使用除 jQuery 之外的任何框架吗？这是我到目前为止所拥有的http://jsfiddle.net/kmHZt/10/

Answer 1

除了 Alfred 的回答之外，您还应该查看 CSS 动画（而不是过渡）。

这是一个很好的教程：https ://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations

Css 动画/过渡结合使用 javascript 添加类名应该就足够了，除非您要为很多东西设置动画，那么我建议使用HTML 5 Canvas

Answer 2

您可以结合使用 JavaScript 和 CSS 过渡：

CSS：

.slide-elem {
    position: relative;
    -webkit-transition: 0.5s left;
    -moz-transition: 0.5s left;
    -o-transition: 0.5s left;
    transition: 0.5s left;
}
.slide-elem.triggered {
    left: 50px; // Your animation here
}

JS：

document.querySelector(".slide-elem").className += " triggered";

当然，您可以自定义所有这些来做任何您想做的事情。更多关于 CSS 过渡：http ://www.w3schools.com/css3/css3_transitions.asp