Javascript 旋转元素后的过渡

我做了一个简单的火箭，它在行星之间移动。我希望火箭旋转到行星上，然后将其平移/改变位置到行星上

我设法知道我想让它朝哪个方向移动，但我不知道如何先旋转，然后再开始移动火箭

一旦用户单击一个行星，我就会应用js中的transorm，如下所示：

rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
setRocketOrientation(destination);

const位置={
答：{顶部：“25%”，左侧：“27%”，
B:{顶部：“25%”，左边：“77%”，
C:{顶部：“60%”，左侧：“27%”，
D:{顶部：“60%”，左侧：“77%”
}
var origin=“默认”；
var rocket=$（“#rocket”）；
$（“.planet”）。在（“单击”，功能（e）{
let element=$（this）[0].id；
css（{“top”：POSITIONS[element].top，“left”：POSITIONS[element].left}）；
坐姿（元素）；
});
函数设置RocketOrientation（目标）{
设方向=null；
交换机（目的地）{
案例“A”：
如果（原点==“默认”| |原点==“D”）
方向=“-45度”
否则如果（原点==“B”）
方向=“-90度”
否则，如果（原点==“C”）
方向=“360度”
打破
案例“B”：
如果（原点==“默认”| |原点==“C”）
方向=“45度”
else if（原点==“A”）
方向=“90度”
否则如果（原点==“D”）
方向=“360度”
打破
案例“C”：
如果（原点==“默认”| |原点==“B”）
方向=“-120度”
else if（原点==“A”）
方向=“-180度”
否则如果（原点==“D”）
方向=“-90度”
打破
案例“D”：
如果（原点==“默认”| |原点==“A”）
方向=“120度”
否则如果（原点==“B”）
方向=“180度”
否则如果（原点==“D”）
方向=“90度”
打破
}
css（{“transform”：“rotate（“+orientation+”）”}）；
}

html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
背景：线性梯度（至底部，#20202c 0%，#515175100%）；
字体系列：“流沙”，无衬线；
}
身体{
身高：100%；
宽度：100%；
背景：url(http://www.script-tutorials.com/demos/360/images/stars.png)重复中上；
}
.星球{
身高：6em；
位置：绝对位置；
}
#A{顶部：25%；左侧：25%；}
#B{顶部：25%；左侧：75%；}
#C{顶部：60%；左侧：25%；}
#D{顶部：60%；左侧：75%；}
#火箭{
位置：绝对位置；
左：50%；
最高：35%；
身高：5公分；
过渡：所有2个容易进入；
/*动画：抖动0.2秒缓进缓出0.2秒无限交替*/
}
@关键帧抖动{
从{变换：旋转（1deg）；}
到{变换原点：中心；变换：旋转（-1deg）；}
}

代码编号#1
银河系

您可以在位置的更改步骤中添加超时

setTimeout(function() {
    rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
}, 2000);

然后，在旋转动画完成之前，火箭的位置不会改变。

您可以点击火箭上的事件，在火箭旋转后发射后，您可以将其取消设置并触发正确的

translate（）

动画

@编辑：关于使用

setTimeout

-setTimeout可以工作，但并非完美无瑕。计时器有时会关闭，这并不是最好的做法。使用

transitionend

更高效，更能防止错误。

您可以只添加一个函数，并将其计时器设置为转换持续时间

请参见beleow代码片段：

const位置={
答：{顶部：“25%”，左侧：“27%”，
B:{顶部：“25%”，左边：“77%”，
C:{顶部：“60%”，左侧：“27%”，
D:{顶部：“60%”，左侧：“77%”
}
var origin=“默认”；
var rocket=$（“#rocket”）；
$（“.planet”）。在（“单击”，功能（e）{
let element=$（this）[0].id；
让持续时间=$（“#rocket”）.css（“过渡持续时间”）.replace（“s”）和“）*1000；
坐姿（元素）；
setTimeout（函数（）{rocket.css（{“top”：位置[element].top，“left”：位置[element].left}）；}，持续时间）
});
函数设置RocketOrientation（目标）{
设方向=null；
交换机（目的地）{
案例“A”：
如果（原点==“默认”| |原点==“D”）
方向=“-45度”
否则如果（原点==“B”）
方向=“-90度”
否则，如果（原点==“C”）
方向=“360度”
打破
案例“B”：
如果（原点==“默认”| |原点==“C”）
方向=“45度”
else if（原点==“A”）
方向=“90度”
否则如果（原点==“D”）
方向=“360度”
打破
案例“C”：
如果（原点==“默认”| |原点==“B”）
方向=“-120度”
else if（原点==“A”）
方向=“-180度”
否则如果（原点==“D”）
方向=“-90度”
打破
案例“D”：
如果（原点==“默认”| |原点==“A”）
方向=“120度”
否则如果（原点==“B”）
方向=“180度”
否则如果（原点==“D”）
方向=“90度”
打破
}
css（{“transform”：“rotate（“+orientation+”）”}）；
}

html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
背景：线性梯度（至底部，#20202c 0%，#515175100%）；
字体系列：“流沙”，无衬线；
}
身体{
身高：100%；
宽度：100%；
背景：url(http://www.script-tutorials.com/demos/360/images/stars.png)重复中上；
}
.星球{
身高：6em；
位置：绝对位置；
}
#A{顶部：25%；左侧：25%；}
#B{顶部：25%；左侧：75%；}
#C{顶部：60%；左侧：25%；}
#D{顶部：60%；左侧：75%；}
#火箭{
位置：绝对位置；
左：50%；
最高：35%；
身高：5公分；
过渡：所有2个容易进入；
/*动画：抖动0.2秒缓进缓出0.2秒无限交替*/
}
@关键帧抖动{
从{变换：旋转（1deg）；}
到{变换原点：中心；变换：旋转（-1deg）；}
}

代码编号#1
银河系

我将代码笔内容作为一个片段包含在问题中，以便