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。

首先，修改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);
}

如何依次对CSS转换命令进行排序

1 个答案: