8

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

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

我也可以让它动画:

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

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

有没有办法让 CSS3 从文档的左上角开始动画,就像 jQuery 一样?我尝试更改变换原点和其他一些设置,但没有成功。

4

3 回答 3

6

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

我可以看到用 CSS 实现您想要的一种方法是绝对定位元素,并使用 CSS3transition更改其lefttop属性。

这是一个小提琴: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在元素被点击时将类添加到元素中。

于 2012-06-14T02:59:20.153 回答
0

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

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}
于 2013-03-27T22:06:01.870 回答
0

如果我错了,请纠正我,但是您要使用 CSS3 动画的原因是因为 jQuery 动画没有做 CSS3 动画可以做的事情?

如果我是正确的,那么看看这个名为.transit的 jQuery 插件,它允许您将所有 CSS3 动画应用到任何选择器,就像它在 CSS3 格式中应用的方式一样,但它是通过程序化的 jQuery 方法完成的。

该插件处理大量的 CSS3 滑动和移动要求以及任何其他你可以扔给它的 CSS3 动画。上面的链接在整个页面都有示例。

如果这不是您想要的,请意识到当一个对象“拖放”到另一个元素中时,CSS 无法“检测”到。有伪触发器,但无论如何:hover都会触发。

于 2012-06-14T04:19:36.400 回答