Javascript回调重置转换

尝试以同步方式重置元素CSS转移属性，以便在用户从屏幕上移除手指时允许交互式抽屉滑动关闭。Javascript回调重置转换

我已经测试了下面的函数，里面放置了一个回调函数，调用函数后立即重置了transition属性。我怎样才能让这个函数的内容顺序执行？

 $('.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',''); 
     })(); 
    })

来源

2017-02-27 Cress

你可以看看[这里]（http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-结束）文章，向您展示如何挂钩到转换结束事件 – JohanP

您可以使用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>

来源

2017-02-27 00:59:55

Javascript回调重置转换

回答

相关问题