javascript - 遷移が発生した場合、JS コールバックを CSS3 遷移で待機させる堅牢な方法は何ですか?

Question

以前の JS トランジションでは、コールバックを介してトランジション後に発生する動作を指定できました。例えば

//jQuery
function hideTheContent() {
    $('#content').fadeOut(1000,function() {
      mandatoryLogicAfterHidingContent();
    });
}

CSS3 トランジションを使用すると、次のようなことができます。

//CSS
#content {
  opacity:1;
  transition: opacity 1s;
}

.hidden {
  opacity:0;
  transition: opacity 1s;
}

//jQuery
function hideTheContent() {
    $('#content').addClass('hidden');
    // still need to run mandatoryLogicAfterHidingContent
}

私は新しい transitionend イベントを知っているので、次のようなことができると仮定します:

//jQuery
function hideTheContent() {
    $('#content').on('transitionend', function(e) {
      mandatoryLogicAfterHidingContent()
    })

    $('#content').addClass('hidden');
}

しかし、現在 UI から JS を分離しているため、他の誰かがコンテンツ非表示が瞬時に行われる新しい UI を作成し、CSS3 トランジションを削除し、不注意で JS 呼び出しを強制的に中断する可能性があります。

別のシナリオでは、ボックスがあり、そのボックスのサイズを 50x50 (トランジションあり) に変更してから、mandatoryLogicAfterResize() を呼び出すリセット関数があるとします。リセット fn を 2 回呼び出した場合、この場合に遷移イベントが発生することが保証されているとは思いませんが、両方の回を実行するには、mandatoryLogicAfterResize が必要です。

より複雑なコードベースでは、ターゲットにしている特定のトランジションの前に他のトランジションが呼び出されることも心配しています。そして、mandatoryLogic() を時期尚早にトリガーします。ここでの中心的な問題は、CSS3 トランジションを使用して、jQuery コールバックでできるように、mandatoryLogicAfterHidingContent() イベント ハンドラーを自分だけの の呼び出しと防御的に結びつけるにはどうすればよいかということだと思います。addClass('hidden')