在 CSS 转换完成之前执行的 Javascript

Question

我的以下代码无法正常工作。它应该制作一个 div，当点击时，向上移动并消失，然后返回并重新出现。但是，每当我添加要返回并重新出现的部分时，第二部分都会在第二部分有机会过渡之前执行。任何帮助让它延迟以便 div 向上移动然后像我想要的那样下降？我试过使用计时器，但我认为我做的不对。这是代码。

/*function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}*/
function clicked(x) {
    x.style.top="-50px";
    x.style.opacity="1";
    //sleep(500);
    //setTimeout(function(){alert('hi)}, 500);
    //x.innerHTML="女";
    x.style.top="50px";
    x.style.opacity="1";
}

Answer 1

您可以拆分两个 Action 并使用 setTimeout 激活第二部分

var click = document.getElementById('click');
click.addEventListener('click', function() {
    slideUp(click);
    setTimeout(function() { slideDown(click); }, 500);
});

参见 JSFiddle

如果你会使用 jQuery，你可能会使用 delay

$('#click').click(function() {
    $(this).slideUp().delay(500).slideDown();
});

JSFiddle