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代码：

＆＃13;

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 + ")"});
}

＆＃13;

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); }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

Answer 3

你可以点击火箭上的transitionend事件，在旋转之后它被解雇后你可以取消它并触发正确的setTimeout动画。

@EDIT：关于transitionend的答案 - setTimeout可行，但不是完美的。计时器有时会关闭，这不是最好的做法。使用{{1}}更有效，更容易出错。

旋转元素后转换

3 个答案: