旋转元素后转换

Question

我做了一个在行星之间移动的简单火箭.我希望火箭旋转到地球上,然后转换它/改变它的位置到点击的行星.

我设法知道我想要去哪个方向但是我无法弄清楚如何首先进行旋转并且在开始过渡以移动火箭之后.

一旦用户点击这样一个行星,我就应用js的transorm:

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

Codepen

const POSITIONS = {
  A: {top: "25%", left: "27%"},
  B: {top: "25%", left: "77%"},
  C: {top: "60%", left: "27%"},
  D: {top: "60%", left: "77%"}
}
var origin = "default";
var rocket = $("#rocket");

$(".planet").on("click", function(e) {
  let element =  $(this)[0].id;

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

function setRocketOrientation (destination) {
  let orientation = null;
  switch(destination) {
    case "A":
      if(origin === "default" || origin === "D")
        orientation = "-45deg"
      else if(origin === "B")
        orientation = "-90deg"
      else if(origin === "C")
        orientation = "360deg"
      break;
    case "B":
      if(origin === "default" || origin === "C")
        orientation = "45deg"
      else if(origin === "A")
        orientation = "90deg"
      else if(origin === "D")
        orientation = "360deg"
      break;
    case "C":
      if(origin === "default" || origin === "B")
        orientation = "-120deg"
      else if(origin === "A")
        orientation = "-180deg"
      else if(origin === "D")
        orientation = "-90deg"
      break;
    case "D":
      if(origin === "default" || origin === "A")
        orientation = "120deg"
      else if(origin === "B")
        orientation = "180deg"
      else if(origin === "D")
        orientation = "90deg"
      break;
  }

  rocket.css({"transform": "rotate(" + orientation + ")"});
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #20202c 0%,#515175 100%);
  font-family: 'Quicksand', sans-serif;
}

body {
  height: 100%;
  width: 100%;
  background:url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat center top;
}

.planet {
  height: 6em;
  position: absolute;
}

#A { top: 25%; left: 25%; }
#B { top: 25%; left: 75%; }
#C { top: 60%; left: 25%; }
#D { top: 60%; left: 75%; }

#rocket {
  position: absolute;
  left: 50%;
  top: 35%;
  height: 5em;
  transition: all 2s ease-in;
/*   animation: shake 0.2s ease-in-out 0.2s infinite alternate; */
}

@keyframes shake {
 from { transform: rotate(1deg); }
 to { transform-origin: center center; transform: rotate(-1deg); }
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h1 class="title">Codevember <span class="number"> #1 </span></h1>
  <h2 class="type">Galaxy</h2>
  <div class="social"></div>
</div>

<img id="A" class="planet" src="https://i.imgsafe.org/a4/a4262a44b5.png">
<img id="B" class="planet" src="https://i.imgsafe.org/a4/a41a11c02c.png">
<img id="C" class="planet" src="https://i.imgsafe.org/a4/a41a18080a.png">
<img id="D" class="planet" src="https://i.imgsafe.org/a4/a4262a44d6.png">

<img id="rocket" src="https://i.imgsafe.org/a4/a404bdc703.png"></img>

Answer 1

您只需添加setTimeout函数并将其计时器设置为转换持续时间.

看到beleow片段:

const POSITIONS = {
  A: {top: "25%", left: "27%"},
  B: {top: "25%", left: "77%"},
  C: {top: "60%", left: "27%"},
  D: {top: "60%", left: "77%"}
}
var origin = "default";
var rocket = $("#rocket");

$(".planet").on("click", function(e) {
  let element =  $(this)[0].id;
  let duration = $("#rocket").css("transitionDuration").replace("s","") * 1000;
  setRocketOrientation(element);
  
  setTimeout(function(){rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});},duration)
  
});

function setRocketOrientation (destination) {
  let orientation = null;
  switch(destination) {
    case "A":
      if(origin === "default" || origin === "D")
        orientation = "-45deg"
      else if(origin === "B")
        orientation = "-90deg"
      else if(origin === "C")
        orientation = "360deg"
      break;
    case "B":
      if(origin === "default" || origin === "C")
        orientation = "45deg"
      else if(origin === "A")
        orientation = "90deg"
      else if(origin === "D")
        orientation = "360deg"
      break;
    case "C":
      if(origin === "default" || origin === "B")
        orientation = "-120deg"
      else if(origin === "A")
        orientation = "-180deg"
      else if(origin === "D")
        orientation = "-90deg"
      break;
    case "D":
      if(origin === "default" || origin === "A")
        orientation = "120deg"
      else if(origin === "B")
        orientation = "180deg"
      else if(origin === "D")
        orientation = "90deg"
      break;
  }

  rocket.css({"transform": "rotate(" + orientation + ")"});
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #20202c 0%,#515175 100%);
  font-family: 'Quicksand', sans-serif;
}

body {
  height: 100%;
  width: 100%;
  background:url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat center top;
}

.planet {
  height: 6em;
  position: absolute;
}

#A { top: 25%; left: 25%; }
#B { top: 25%; left: 75%; }
#C { top: 60%; left: 25%; }
#D { top: 60%; left: 75%; }

#rocket {
  position: absolute;
  left: 50%;
  top: 35%;
  height: 5em;
  transition: all 2s ease-in;
/*   animation: shake 0.2s ease-in-out 0.2s infinite alternate; */
}

@keyframes shake {
 from { transform: rotate(1deg); }
 to { transform-origin: center center; transform: rotate(-1deg); }
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h1 class="title">Codevember <span class="number"> #1 </span></h1>
  <h2 class="type">Galaxy</h2>
  <div class="social"></div>
</div>

<img id="A" class="planet" src="https://i.imgsafe.org/a4/a4262a44b5.png">
<img id="B" class="planet" src="https://i.imgsafe.org/a4/a41a11c02c.png">
<img id="C" class="planet" src="https://i.imgsafe.org/a4/a41a18080a.png">
<img id="D" class="planet" src="https://i.imgsafe.org/a4/a4262a44d6.png">

<img id="rocket" src="https://i.imgsafe.org/a4/a404bdc703.png"></img>

Answer 2

您可以为仓位的更改步骤添加超时。

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

然后火箭的位置不会改变，直到旋转动画完成。