2

私はこの機能を持っています:

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement);
   $(barElement).find('.bar').width(0);
}

insertCSSTransitions(barElement)関数は、これを行います：

var insertCSSTransitions = function (barElement) {
      var timeBar = settings.timeBar;
      $(barElement).find('.bar').attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');
}

何が起こるか: cssTransitions のスタイルが機能する前に、$(barElement).find('.bar').width(0);行が を 0 に設定します。width

decreaseBar関数をそれに変更すると、機能するためです。

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement);

   // set a delay of 1 second before set to 0
   setTimeout(function() {
      $(barElement).find('.bar').width(0);
   }, 1000)
}

jQuery で DOM を操作するとコードが同期されませんか?

4

4 に答える 4

0

おそらくここで起こっているのはinsertCSSTransitions()、ブラウザのコントロールを解放して再描画するまで、 によって行われたスタイルの変更が有効にならないことです。

ブラウザがスタイルsetTimeout(..., 1)を処理した後に要素幅の変更が確実に行われるようにするために使用する必要があるだけです。transition

于 2012-04-28T16:25:17.210 に答える
0

人々は非同期動作を聖杯のように話しますが、必要なときに JS を同期させることは、多くの場合、より困難な作業です。Frame.js (asnyc や flow.js などの他のフロー制御ライブラリと同様) は、この問題を解決するために設計されました。フレームでは、次のようにします。

var decreaseBar = function (barElement) {
    Frame(function(next)){
        insertCSSTransitions(barElement);
        next();
    });
    Frame(function(next)){
        $(barElement).find('.bar').width(0);
        next();
    });
    Frame.init();
}
于 2012-04-28T16:35:17.507 に答える
0

コールバックを使用しますか?

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement, function() {
       $(barElement).find('.bar').width(0);
   });
}

var insertCSSTransitions = function (barElement, callback) {
    var timeBar = settings.timeBar;
    $(barElement).find('.bar').attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');

    setTimeout(function() {callback.call();}, timebar*1000);
}

これはコールバックの簡単な例にすぎません。CSS トランジションが発生するのを待ちません。また、コールバックが関数であるかどうかを確認する単純な typeof チェックが必要です。

編集：

Pointy が指摘しているように、コールバックは、それがどのように行われたかを示す以外には、あまり機能しません。コールバックをトランジション エンドにバインドすることはおそらく進むべき道ですが、そのプロパティには多数のプレフィックスがあり、簡単なブラウザで解決できます。ブラウザでの実際のサポートを確認するためのライブラリがあります。

var insertCSSTransitions = function (barElement, callback) {
    var timeBar = settings.timeBar,
        transitionEnd = "TransitionEnd";
    if ($.browser.webkit) {transitionEnd = "webkitTransitionEnd";}
    else if ($.browser.mozilla) {transitionEnd = "transitionend";}
    else if ($.browser.opera) {transitionEnd = "oTransitionEnd"; }

    $(barElement).find('.bar')
                 .attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');
                 .on(transitionEnd, function() {
                     callback.call();
    });
}
于 2012-04-28T16:30:54.490 に答える
0

AJAX 呼び出しが行われていない限り、JavaScript は常に同期です: JavaScript はいつ同期しますか? .

JavaScript と同期しない CSS トランジションを使用しているため、コードが機能していません。JavaScript はスタイル遷移を DOM に「追加」しており、完了すると次に進みます。

あなたの機能の目的がよくわからないので、より良い解決策を考え出すのは難しいです. 全体として、JavaScript にハードコードされたスタイルを追加させるのは、通常は悪い習慣です。

于 2015-04-10T21:55:10.970 に答える