jquery - CSS3 动画，转换到位置

Question

我有一个 div，我可以点击它来拖动它。一旦它在一个区域上，它就会通过以下方式动画到它的位置:

$("#wheel1").animate({left: "200px", top: "100px"});

我还可以让它制作动画:

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 100px);
    }
}

区别在于；使用 jQuery，它会从文档左侧动画到 200px。使用 CSS3，它会在你放下它的地方设置 200px 的动画(这很糟糕)

有没有办法让 CSS3 从文档的左上角开始动画，就像 jQuery 那样？我试过更改 transform-origin 和其他一些设置，但没有成功。

Answer 1

我不是 CSS3 转换方面的专家，但我认为 translate 是相对于元素的原始位置。

我可以看到用 CSS 实现您想要的一种方法是绝对定位元素，并使用 CSS3 transition 更改其 left 和 top 属性。

这是一个 fiddle :http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div>

CSS:

.box {
    position: absolute;
    background: #ff0000;
    left: 400px;
    top: 200px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear;
}
.box.move {
    left: 200px;
    top: 100px;
}

jQuery:

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

JS的目的是在元素被点击时添加move类