vue.js vクラスバインディングが他のバインディングをオーバーライドしていて、クラスを正しく削除していません。

Question

クリックイベントごとにアニメーションクラスを追加したいパンチバッグ "ゲーム"があります。ヘルスメーターがゼロになったら、バッグの画像をバーストバッグの画像に置き換えます。

アニメーションクラスを追加しようとしない限り、これは問題なく動作します。アニメーションを追加しようとすると、どちらの機能も動作しません。

リンクはこちらです：https://codepen.io/damianocel/pen/mqXady

これはHTMLです：

<div id="vue-app-one"> 
<!-- the bag images --> 
<div id="bag" v-bind:class="[animationToggle ? activeClass : 'swingLeft', 
'noSwing']" v-bind:class="{ burst: ended }"></div> 

<!-- health meter --> 
<div id="bag-health"> 
    <div v-bind:class="[danger ? activeClass : 'dangerous', 'safe']" v- 
bind:style="{ width: health + '%'}"></div> 
</div> 


<!-- the game buttons --> 

<div id="controls"> 
    <button v-on:click="punch" v-show="!ended">Punch it!</button> 
     <button v-on:click="restart">Restart game</button> 
</div> 

</div> 

問題の一部はこれです：

<div id="bag" v-bind:class="[animationToggle ? activeClass : 'swingLeft', 
'noSwing']" v-bind:class="{ burst: ended }"></div> 

//私はnoSwing CSSクラスをバインドしようとする上animationToggleプロパティが変更された場合はswingLeftに変更します。しかし、私はdevのツールをチェックすると、これは両方のクラスを追加し、アニメーションは起こっていません。私は2つのクラスのバインディングを1つの要素に持つことができますか？

//さらに、私は、バーストCSSクラスにendsプロパティをバインドします。これは、animationToggleバインディングとすべての関連するCSSを削除した場合にのみ機能します。

インスタンスは次のようになります。

var one = new Vue({ 
el: '#vue-app-one', 
data: { 
health: 100, //init health bar, this works 
ended: false, // init ended state, works partially 
punched: false, //init punched, don't need for now 
danger: false, // this works 
animationToggle: false, // there is a problem with this 
activeClass: "" // have to init or I get the errors in the console 
}, 
methods: { 

    punch: function(){ 
     this.health -=10; //works 
     this.animationToggle= true; // is set on click 
     if(this.health <= 0){ 
     this.ended = true; // works partially, the background img change is not working ,though 
     } 
     if(this.health <= 20){ 
     this.danger = true; // works 
     } 
     else{ 
     this.danger = false; 
     } 
     setTimeout(function() { 
      this.animationToggle = false // I am not sure this ever works, give no error, but I am still not sure 
      }.bind(this),500); 

    }, 
    restart: function(){ 
    this.health =100; 
    this.ended = false; // works partially, no img change when health is 0, though 
    } 
} 

}); 

関連するCSS：

#bag.noSwing { 
width: 300px; 
height: 500px; 
margin: -80px auto; 
background: url("https://3.imimg.com/data3/VM/TI/MY-18093/classical-heavy- 
bag-250x250.png") center no-repeat; 
background-size: 70%; 
-webkit-animation-name: swingRight; 
-webkit-animation-duration:1s; 
-webkit-animation-iteration-count: 1; 
-webkit-transition-timing-function: cubic-bezier(.11,.91,.91,.39); 
-webkit-animation-fill-mode: forwards; 
-webkit-transform-origin: center; 
     transform-origin: center; 
} 

#bag.swingLeft { 
width: 300px; 
height: 500px; 
margin: -80px auto; 
background: url("https://3.imimg.com/data3/VM/TI/MY-18093/classical-heavy- 
bag-250x250.png") center no-repeat; 
background-size: 70%; 
-webkit-animation-name: swingLeft; 
-webkit-animation-duration:1s; 
-webkit-animation-iteration-count: 1; 
-webkit-transform-origin: right; 
     transform-origin: right; 
-webkit-transition-timing-function: cubic-bezier(.91,.11,.31,.69); 

} 


@keyframes swingLeft { 
0% { -webkit-transform: rotate (0deg); transform: rotate (0deg); } 
20% { -webkit-transform: rotate (-20deg); transform: rotate (-20deg); } 
50% { -webkit-transform: rotate (20deg); transform: rotate (20deg); } 
70% { -webkit-transform: rotate (-10deg); transform: rotate (-10deg); } 
100% { -webkit-transform: rotate (0deg); transform: rotate (0deg); } 
} 

@keyframes swingRight { 
0% { -webkit-transform: rotate (0deg); transform: rotate (0deg); } 
20% { -webkit-transform: rotate (20deg); transform: rotate (20deg); } 
50% { -webkit-transform: rotate (-20deg); transform: rotate (-20deg); } 
70% { -webkit-transform: rotate (10deg); transform: rotate (10deg); } 
100% { -webkit-transform: rotate (0deg); transform: rotate (0deg); } 
} 

#bag.burst { 

background: url("http://i.imgur.com/oRUzTNx.jpg") center no-repeat; 
background-size: 70%; 

} 

#bag-health { 
width: 200px; 
border: 2px solid #004; 
margin: -80px auto 20px auto; 
} 

#bag-health div.safe { 
height: 20px; 
background: #44c466; 
} 

＃バッグ・健康div.dangerous {

背景：＃1 00FFFF。 }

なぜ「パンチ」ボタンをクリックしたときにアニメーションが適用されないのですか。なぜそれがnoSwingクラスとswingLeftクラスの両方を追加するのですか？また、ヘルスメーターがゼロの値に達すると、背景画像をバーストに変える機能を無効にします。

Answer 1

まずはには同じ要素に2つのクラスバインディングがありません。

あなたがクラスを追加/削除に関するロジックのかなり多くを持っているので、私は計算にそれを抽出することをお勧め：

computed: { 
    className() { 
     let classes= []; 
      if (this.animationToggle){ 
      classes.push(this.activeClass) 
      } 
      else{ 
      classes.push('swingLeft') 
      } 
     return classes; 

     } 
    } 
} 


<div id="bag" :class="className"></div>