発生前に特定の遷移を停止する

Question

私は本当に自分自身を修正するようには思えないというかなり礼儀の疑問があります。私はすでに同様の答えを見てきましたが、実装のどれも私の実装の可能性はありません。

基本的に私は小さな箱の中を動き回る画像（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); 
} 

Answer 1

あなたは.baddieジャンプクラスを追加すると、それだけで.baddie左クラスのtransformプロパティを上書きします。あなたのCSSに追加する必要があります：

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