Question

尝试以同步方式重置元素CSS过渡属性，以便在用户将手指从屏幕上移开时允许交互式抽屉滑动关闭。

我已经测试了下面的函数，其中放置了一个回调，并且在调用函数后，transition属性立即重置。如何才能使这些函数的内容按顺序执行？

@ServerEndpoint(value = "/handler", 
            configurator = GetHttpSessionConfigurator.class)
public class WebSocket {

Answer 1

您可以使用transitionend事件。在添加转换和保证金之间添加了快速setTimeout()，否则它们会同时触发，并且可能不会发生转换。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Javascript回调重置转换

1 个答案: