javascript - vue.js v 类绑定(bind)覆盖了其他绑定(bind)并且没有正确删除类

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 类绑定(bind)为默认值，并在 animationToggle 属性更改时将其更改为 swingLeft。但是，当我检查开发工具时，这会添加两个类，并且没有动画发生。我可以像这样在 1 个元素上有 2 个类绑定(bind)吗？

//此外，我将 ended 属性绑定(bind)到 burst CSS 类，这仅在我删除 animationToggle 绑定(bind)和所有相关 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;
}

#bag-health div.dangerous {

背景:#00ffff；

那么为什么单击“punch it”按钮时没有应用动画，为什么它同时添加了 noSwing 和 swingLeft 类？并且它覆盖了当运行状况计达到零值时将背景图像更改为突发错误的功能。

Answer 1

首先，您不能在同一个元素上有 2 个类绑定(bind)，您也不应该需要它们。

你有很多关于添加/删除类的逻辑，所以我建议将它提取到一个计算:

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

      }
  }
}


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