要素を回転させた後の遷移

私は惑星間を移動する単純なロケットを作った。私はロケットを回転させて惑星を回転させ、それを翻訳した後、その位置をクリックした惑星に変えてください。要素を回転させた後の遷移

私はどの方向に向いているのか知っていましたが、最初にどのように回転させるか、そしてロケットを動かすための移行を開始した後にはわかりません。ユーザーがクリックすると

は、私は1つの惑星のように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>

が

出典

2017-11-02 Romina

将来的にcodepenことが起こるかもしれないものは何でも、それはまだここになりますように、私は、問題のスニペットとしてcodepen内容が含まれています。また、他の人がスニペットを回答にコピーして試してみることもできます。 – Connum

ありがとう！私は何かを尋ねる次回のためにそれを念頭に置いておきます！ – Romina

は、あなたがのALTERステップにタイムアウトを追加することができます位置。

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

回転アニメーションが終了するまで、ロケットの位置は変更されません。

出典

2017-11-02 08:50:30 M4R1KU

これは間違いなく、あなたは時間とともに私を打ち負かす：D –

ロケットのtransitionendイベントをタップすると、回転後に起動した後、設定を解除して適切なtranslate()のアニメーションをトリガーすることができます。

@ EDIT：setTimeoutとの回答について - setTimeoutは機能しますが、完全ではありません。タイマーがオフになることがあり、実際にはベストプラクティスではありません。 transitionendを使用する方がより効率的でエラーのないものになります。

出典

2017-11-02 08:51:17

ありがとう、私はこの出来事について知りませんでした。魅力的な作品！ – 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:35

このヘルプを期待してください:) –

私はそれを試して、それは完璧に動作します、ありがとう！ – Romina

あなたは大歓迎です:)私はうれしいです –

要素を回転させた後の遷移

答えて

関連する問題