jquery - 链式webkit动画

Question

我想创建一个“链接”动画，通过两个连续的步骤将屏幕上的 div 元素移动到屏幕上的两个不同点。

因此，如果我的 div 从 (0,0) 开始，我希望此 div 具有动画效果并在 2 秒内向 (100,100) 移动。到达后一个目的地后，它会再次动画并在 3 秒内移动到点 (200, 200)。

使用 -webkit-animation 我可以制作一个翻译或动画，但我无法在第一个动画完成后将第二个动画链接到开始 - 因为我没有提供句柄(事件或 css class) 可以给我这样的信息。

我很高兴在解决方案中使用一些 javascript 魔法。

下面是一些代码来可视化我正在尝试做的事情:

HTML:

<div id="box"></div>

CSS:

body {
    position: relative;
}

#box {
    width: 64px;
    height: 64px;
    position: absolute;
    text-indent: -9999px;
}

.translate1 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 2s ease-in;
}

.translate2 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 23 ease-in;
}

Javascript

$('#box').click(function(){ $(this).addClass('translate1') });

编辑:我正在寻求使用 -webkit-animation 的解决方案，因为它是目前在 osx 中显示流畅的类原生动画的最佳方式

Answer 1

我使用 jQuery 和 Modernizr，然后是这样的函数:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

然后这样调用它:animate($("#someID"),{"left":"100px"});

看看http://css3.bradshawenterprises.com/legacy/了解更多详情。