小编Rom*_*ina的帖子

旋转元素后转换

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery css-transitions

Rom*_*ina

2017 11-07

11
推荐指数

2
解决办法

619
查看次数