Transition after rotate element

Question

I made a simple rocket which moves between planets. I want the rocket to rotate to the planet is going and after that translate it / change its position to the planet clicked.

I managed to know which direction I want it to go but I can't figure out how to make the rotation first and after start the transition to move the rocket.

I apply the transorm from js once the user clicks one planet like this:

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

You can add just a setTimeout function and set it's timer as the transition duration .

see beleow snippet :

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

You can add a timeout to the alter step of the position.

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

Then the position of the rocket is not changed until the rotate animation is finished.