1

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');
    });
});

問題：

2回目の反復では、要素は、変換なしの要素の状態ではなく、以前に変換されたYから実際に移動されます。

キーフレームを使用すると機能しますが、事前定義されたCSSクラスをさらに追加する必要がありますが、これは実際にはオプションではありません。

4

1 に答える 1

0

私が思いついた可能な解決策は、を使用すること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');
    });
});

2つのDemeは、 http ：//jsfiddle.net/CP8An/とhttp://jsfiddle.net/CP8An/1/で確認できます。後者は望ましい結果です。

なぜ必要なのかわかりませんsetTimeout。結局のところ、コールバックを呼び出す前に、以前に定義されたクラスが削除されます。使用setTimeoutすることは、解決策というよりは回避策のようです。これは、同様の問題を扱っている人に役立つかもしれませんが、それでも私は別の提案を受け入れています。

于 2013-02-17T18:14:18.367 に答える