javascript - 在没有 jQuery 或其他库的情况下在 JavaScript 中简化动画

Question

<div>当您将鼠标悬停在网页上时，我想从右侧进入网页。所以是这样的：

$('div.from_right').hover(function() {
  $(this).animate({right: '-300px'});
});

但我不想使用 jQuery 或任何其他库。JavaScript 中是否有内置机制来为位置设置动画？还是我requestAnimationFrame()反复打电话，直到<div>我想要它在哪里？

我只关心现代浏览器。

Answer 1

使用 CSS 过渡。

div {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:margin 3s ease-out;
    -moz-transition:margin 2s ease-out;
    -o-transition:margin 2s ease-out;
    -ms-transition:margin 2s ease-out;
    transition:margin 2s ease-out;
}
div:hover {
    margin-left:300px;
}

演示。