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

DEMO.

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

1 个答案: