Javascriptコールバックリセット遷移

Question

ユーザーが画面から指を離したときにインタラクティブな引き出しをスライドさせるために、エレメントCSSの遷移プロパティを同期的にリセットしようとしました。

コールバックを内部に配置し、関数が呼び出された直後に遷移プロパティがリセットされている以下の関数をテストしました。どのようにしてこの関数のコンテンツを順番に実行させることができますか？

 $('.main-drawer-wrapper').on('touchend',function(){ 
     var newoffSet=$('.main-drawer-wrapper').offset().left; 
     $('.main-drawer-wrapper').css('transition','margin-left 1s'); 
     if (newoffSet>halfSet){ 
      $('.main-drawer-wrapper').css('margin-left',0); 
     }else{ 
      $('.main-drawer-wrapper').css('margin-left',offSet + 'px');  
     } 
     (function(){ 
      $('.main-drawer-wrapper').css('transition',''); 
     })(); 
    }) 

Answer 1

イベントtransitionendを使用できます。トランジションとマージンを追加する間に素早くsetTimeout()を追加しました。そうでないと、同時に発生し、トランジションが起こらない可能性があります。

var $mainDrawerWrapper = $('.main-drawer-wrapper'); 
 

 
$mainDrawerWrapper.css('transition', 'margin-left 1s'); 
 
setTimeout(function() { 
 
    $mainDrawerWrapper.css('margin-left', '100px').on('transitionend', function() { 
 
    $(this).css({ 
 
     'transition': '', 
 
     'margin-left': '0' 
 
    }); 
 
    }); 
 
}, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-drawer-wrapper">main-drawer-wrapper</div>