问题 旋转元素后转换

我做了一个在行星之间移动的简单火箭。我希望火箭旋转到地球正在进行，之后将其转换/改变其位置到点击的行星。

我设法知道我想要去哪个方向，但我无法弄清楚如何先进行旋转，然后开始过渡以移动火箭。

一旦用户点击一个这样的行星，我就会应用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>

11805

2017-11-02 08:41

起源

我将codepen内容作为一个片段包含在问题中，以便将来在codepen中可能发生的任何事情，它仍然会在这里。此外，其他人可以简单地将片段复制到他们的答案并进行实验。 - Connum

谢谢！下次我问的时候我会记住它！ - Romina

答案:

你可以只添加一个的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>

2017-11-02 08:54

希望这个帮助:) - Boo Berr'ita

我试过了，它完美无缺，谢谢！ - Romina

不客气:)我很高兴 - Boo Berr'ita

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

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

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

2017-11-02 08:50

这是对的，你用时间打败了我：D - Luca De Nardi

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

@EDIT：关于答案 setTimeout - setTimeout可以工作，但不是完美的。计时器有时会关闭，这不是最好的做法。运用 transitionend 更高效，更防错。

2017-11-02 08:51

谢谢，我不知道这个事件。奇迹般有效！ - Romina

问题旋转元素后转换

答案:

热门问题

问题 旋转元素后转换

答案:

热门问题

问题旋转元素后转换