javascript - CSS遷移を待つ

Question

CSS トランジションを使用して、div の 1 つのマージンを設定しています。この効果が終了するのを待って、他の関数を呼び出す方法を知る必要があります...方法はありますか? スタックオーバーフローに関する他の投稿をいくつか読みましたが、それらはすべて私の問題とは異なって見えます。

Answer 1

このSOの答えを試してください

トランジション リスナー イベントはブラウザごとに異なるため、以下の関数は使用するリスナーを見つけて正しいものを返します。

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var transitionEnd = whichTransitionEvent();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

function theFunctionToInvoke(){
// set margin of div here
}

Answer 2

2 つの方法で行うことができます (各例で遷移に 1 秒かかると仮定します)。

1.) その要素をjQuery.animateでアニメーション化します(CSS トランジションの代わりに):

$('#mydiv').animate({
    'margin-left': '10px',
}, {
    duration: 1000,
    complete: function () {
        // do stuff after animation has finished here
    }
});

2.) 一定時間後にアニメーション化:

window.setTimeout(function () {
    // do stuff after animation has finished here
}, 1000);

編集：＃2が悪い解決策であることは理解していますが、他の人が私と同じ道を考えていた場合に備えて、これを維持します.