Chuyển tiếp sau khi xoay phần

Question

Tôi đã tạo ra một tên lửa đơn giản di chuyển giữa các hành tinh. Tôi muốn tên lửa quay sang hành tinh đang diễn ra và sau đó dịch nó/thay đổi vị trí của nó thành hành tinh được nhấp vào.

Tôi đã quản lý để biết hướng tôi muốn nó đi nhưng tôi không thể tìm ra cách quay đầu tiên và sau khi bắt đầu chuyển đổi để di chuyển tên lửa.

tôi áp dụng các transorm từ js khi dùng nhấp vào một hành tinh như thế này:

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

Bạn có thể thêm một thời gian chờ tới bước ALTER của vị trí.

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

Sau đó, vị trí của tên lửa không thay đổi cho đến khi hoạt ảnh xoay kết thúc.

Answer 2

Bạn có thể nhấn vào sự kiện transitionend trên tên lửa và sau khi nó được kích hoạt sau khi xoay, bạn có thể bỏ đặt nó và kích hoạt hoạt ảnh translate() thích hợp.

@EDIT: liên quan đến câu trả lời với setTimeout - setTimeout sẽ hoạt động nhưng không hoàn hảo. Bộ hẹn giờ đôi khi tắt và đó không thực sự là phương pháp hay nhất. Sử dụng transitionend hiệu quả hơn và có khả năng chống lỗi hơn.

Answer 3

Bạn chỉ có thể thêm một hàm setTimeout và đặt bộ hẹn giờ là thời gian chuyển đổi.

thấy đoạn 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>