javascript - jQuery TransitionEnd イベントでアニメーションが完了しない

Question

状況

• DIV1は.rightnav.frontをクリック。
• DIV1が右に移動し、不透明度が下がる
• DIV1 は左に戻り、完了時に不透明度は 0 です
• DIV1 はクラス .hidden と .offset を取得して非表示にし、画面外に移動するため、クリックできなくなります..
• 次の DIV (テスト目的で id 2 の DIV) では、隠しクラスとオフセット クラスが削除され、次のクリック イベントのターゲットになります。

問題

DIV は右に移動しますが、非表示になる前に左に移動しません (元に戻ります)。試してみるには、一番下の Codepen を参照してください。

ここには JavaScript コードのみを掲載しています。CSS と HTML は codepen にあります。

ここにjQueryコードがあります

$(document.body).on('click','.rightnav.front', function () {
      var x = $(this).parent().parent();
      x.addClass('moveright')
      .one('transitionend', function() {
        x.removeClass('moveright')
      })
      .one('transitionend', function(){
        x.addClass('moveleft');
      })
      .one('transitionend', function() {
        x.addClass('hidden').addClass('offset');
        $('.rightnav.front').removeClass('front');
        var nextId = Number(x.attr('id')) + 1;
        var nextWidget = $('#' + nextId);
        nextWidget.removeClass('hidden');
        nextWidget.children().find('.rightnav').addClass('front');
      }) 
    });

コードペン

ライブ テストの CodePen.IO リンクは次のとおりです: http://codepen.io/nygter/pen/QbpegM