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

【问题标题】：How to translate element position from x1 to x2 using transitions?如何使用转换将元素位置从 x1 转换为 x2？
【发布时间】：2013-02-02 04:14:10
【问题描述】：

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 类，这不是一个真正的选择。

【问题讨论】：

标签： javascript jquery css css-transitions css-transforms

【解决方案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 似乎更像是一种解决方法而不是解决方案。这可能对正在处理类似问题的人有所帮助，尽管我仍然愿意接受其他建议。

【讨论】：