如何顺序 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 函数，完成后执行回调，例如move.

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

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

如何顺序 CSS 转换命令，一个接一个

How to sequence CSS transform commands, one after another

javascript

jquery

css

transform