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>