Переход после поворотного элемента

Я сделал простую ракету, которая перемещается между планетами. Я хочу, чтобы ракета вращалась на планету, и после этого переведите ее/измените ее положение на щелканную планету.

Мне удалось узнать, в каком направлении я хочу идти, но я не могу понять, как сделать поворот первым, и после начала перехода для перемещения ракеты.

Я применяю transorm от js, как только пользователь нажимает на одну планету следующим образом:

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>

Ответ 1

Вы можете добавить только функцию setTimeout и установить ее как продолжительность перехода.

см. фрагмент документа:

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>

Ответ 2

Вы можете добавить тайм-аут к шагу изменения позиции.

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

Тогда положение ракеты не изменяется до тех пор, пока анимация вращения не будет завершена.

Ответ 3

Вы можете нажать на transitionend событие на ракете, и после его запуска после его вращения вы можете отключить его и запустить надлежащий translate() анимация.

@EDIT: в отношении ответов с помощью setTimeout - setTimeout будет работать, но не безупречен. Таймер иногда выключается, и это не самая лучшая практика. Использование transitionend является более эффективным и более защищенным от ошибок.