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

【问题标题】：How to sequence CSS transform commands, one after another如何一个接一个地对 CSS 转换命令进行排序
【发布时间】：2015-03-22 16:14:04
【问题描述】：

所以我尝试使用 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)'
  });
}

【问题讨论】：

尝试将css rotate 添加到move ？
是的，由于 CSS 规则，它采用最后一个转换语句并执行该语句。所以在你的情况下它会忽略旋转命令:(
可以创建 stacksn-ps , jsfiddle.net ?

标签： javascript jquery css transform

【解决方案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);
}

【讨论】：