Question

我有一个div，我点击它来拖动它。一旦它出现在某个区域，它就会通过以下方式激活其位置：

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

我也可以通过以下方式获取动画：

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

区别在于;使用jQuery，它从文档左侧动画到200px。使用CSS3，它可以从放置它的地方动画200px（这很糟糕）

有没有办法从文档的左上角开始制作CSS3动画，就像jQuery一样？我试过改变变换原点和其他一些设置而没有运气。

Answer 1

我不是CSS3变换的专家，但我认为translate与元素的原始位置有关。

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

这是一个小提琴：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类添加到元素中。

Answer 2

如果我错了，请纠正我，但你想使用CSS3动画的原因是因为jQuery动画没有做CSS3动画可以做的事情？

如果我是正确的，那么看看这个名为.transit的jQuery插件，它允许你将所有CSS3动画应用到CSS3格式应用的任何选择器，但它是通过编程的jQuery方法完成的

该插件处理很多CSS3滑动和移动要求以及任何其他CSS3动画。以上链接在整个页面都有示例。

如果这不是你想要的，那么当对象被“丢弃”到另一个元素时，意识到CSS无法“检测”。有:hover伪触发器，但每次无论什么都会触发。

Answer 3

仅供参考，要使用CSS动画执行此操作（不是所选答案显示的过渡），您只需在关键帧中使用left而不是翻译。

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}

CSS3动画，转换为位置

3 个答案: