在發生之前停止特定轉換

我有一個相當粗糙的問題，我似乎無法修復自己。我已經看過類似的答案，但沒有一個實現對我來說似乎是可能的實現。在發生之前停止特定轉換

基本上我有一個圖像（PNG），在一個小盒子裏移動(here is the game)。我面臨的問題是，如果更改精靈正在移動的方向（左右）並且它應該能夠跳轉，圖像應該會翻轉。轉換單獨運行正常，但當我嘗試跳向左側時，它會跳轉右轉。

我想在跳躍之前去掉baddie-left。但它似乎並沒有工作，當我做到了...

完整免責聲明：我們不應該使用任何東西，但'正常'js（即沒有jquery）。

這裏是JS：

switch(key) { 
    case 32: //jumping 
     if(!baddie.classList.contains('baddie-jumping')){ 
      baddie.classList.add('baddie-jumping'); 
      window.setTimeout(function(){ 
       baddie.classList.remove('baddie-jumping'); 
      }, 350); 
     } 
     break; 
    case 37: //moving left 
     if (left_available(left - step)){ 
      if(!baddie.classList.contains('baddie-left')){ 
       baddie.classList.add('baddie-left'); 
      } 
      left = left - step; 
     } else { 
      left = 150; 
      top = 130; 
     } 
     break; 
    case 38: 
     if (top_available(top - step)){ 
      top = top - step; 
     } else { 
      left = 150; 
      top = 130; 
     } 
     break; 
    case 39: //moving right 
     if (left_available(left + step)){ 
      if(baddie.classList.contains('baddie-left')){ 
       baddie.classList.remove('baddie-left'); 
      } 
      left = left + step; 
     } else { 
      left = 150; 
      top = 130; 
     } 
     break; 
    case 40: 
     if (top_available(top + step)){ 
      top = top + step; 
     } else { 
      left = 150; 
      top = 130; 
     } 
     break; 
}

而CSS：

.content { 
    /* If #content position is absolute, the #baddie position will be given in reference to it's parent, which is #content 
    * Makes it easier to do collision calculations */ 
    position: absolute; 
    width: 400px; 
    height: 300px; 
    border: solid 1px #000; 
} 

.baddie{ 
    /* Baddie's postition must be absolute, otherwise we can't move him by changing top and left */ 
    position: absolute; 
    height: 50px; 
    width: 50px; 

    /* Change this to your own baddie! */ 
    background: url("../img/viking.png"); 
    background-size: 50px; 
    transition: all 0.35s ease; 
} 

.baddie-left { 
    transform: rotateY(180deg); 
} 

.baddie-jumping { 
    transform: scale(1.5) translateY(-40px); 
}

來源

2016-10-31 geostocker

當您添加.baddie跳躍類，它只是簡單地覆蓋變換.baddie左類的屬性。您應該添加到您的css中：

.baddie-left.baddie-jumping { 
    transform: scale(1.5) translateY(-40px) rotateY(180deg); 
}

來源

2016-10-31 12:43:30

在發生之前停止特定轉換

回答

相關問題