javascript - 如何一个接一个地对 CSS 转换命令进行排序

Question

所以我尝试使用 CSS 翻译命令移动和旋转对象。我已经找到了如何同时进行两个平移，但我希望对象立即旋转，然后向另一个坐标移动。如果有人有任何建议，他们会很受欢迎:)

$rotate(d);
move(s * 2, point2[0], point2[1]);

function move(s, x, y) {
    $(".boat").css({
      '-webkit-transform': 'translate('+x+'px, '+y+'px)',
      'transform': 'translate('+x+'px, '+y+'px)',
      'transition': 'transform '+s+'ms',
      '-webkit-transition-timing-function': 'linear',
      'transition-timing-function': 'linear',
      '-webkit-transition-delay': '2s', /* Safari */
      'transition-delay': '2s'
     });
    }

function rotate(d)
{
  $(".boat").css({
    '-webkit-transform': 'rotate('+d+'deg)',
    'transform': 'rotate('+d+'deg)'
  });
}

Answer 1

您需要使用回调函数来执行此操作，即首先调用 rotate 函数，完成后执行回调，例如移动。

首先，修改 rotate 函数，使其接受回调和回调的参数。

function rotate(d, cb, arg1, arg2, arg3)
{
  $(".boat").css({
    '-webkit-transform': 'rotate('+d+'deg)',
    'transform': 'rotate('+d+'deg)'
  });

  if(typeof cb === 'function') cb(arg1, arg2, arg3);
} 

然后，当您开始调用函数时，您将像这样调用。

rotate(d, move, (s * 2), point2[0], point2[1]);

当然，不用像这样排列rotate 参数，您可以简单地将它们添加到一个数组中，然后使用for each 循环将参数转发给回调。我写了一个简单的例子。

编辑:

如果回调仍然同时触发，则尝试向其添加 1 或 100 毫秒的 setTimeout，例如

if(typeof cb === 'function'){ 
    setTimeout(function(){
       cb(arg1, arg2, arg3);
    }, 1);
}