如何使用转换将元素位置从x1转换为x2

Question

HTML:

<div id="foo"></div>

CSS：

#foo { width: 100px; height: 100px; background: #f00; }
.a { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(100px); }
.b { -webkit-transition: -webkit-transform 1s linear; -webkit-transform: translateY(50px); }

JavaScript:

$(function () {
    var elm = $('#foo');
    var animate = function (className, callback) {
        elm.addClass(className);
        setTimeout(function () {
            elm.removeClass(className)
            callback();
        }, 1000);
    };
    animate('a', function () {
        animate('b');
    });
});

问题：

在第二次迭代期间，元素实际上是从先前平移的Y移动的，而不是无平移的元素状态。

使用关键帧是可行的，尽管这需要添加更多预定义的CSS类，但这并不是一个真正的选项。

Answer 1

我提出的可能的解决方案是使用setTimeout。

$(function () {
    var elm = $('#foo');
    var animate = function (className, callback) {
        setTimeout(function () {
            elm.addClass(className);
        }, 0);
        setTimeout(function () {
            elm.removeClass(className)
            callback();
        }, 1000);
    };
    animate('a', function () {
        animate('b');
    });
});

在http://jsfiddle.net/CP8An/和http://jsfiddle.net/CP8An/1/.后者是所希望的结果。

我不明白为什么需要setTimeout——毕竟，在调用回调之前，会删除以前定义的类。使用setTimeout似乎更像是一种变通方法，而不是一种解决方案。这可能会对处理类似问题的人有所帮助，尽管我对其他建议持开放态度。