当状态保持不变时如何再次调用动画

Question

我正在研究如何在错误答案时重新设置抖动动画。或者正确答案上的 Flash 动画。

我将 2 个布尔值定义为正确答案的状态，并且我知道如果我输入相同的错误答案，错误的 flash 将保持为 false。但是我该如何解决抖动动画在另一个时间启动的问题。

我做了一个小提琴，正确的代码是'1234'。当您第一次输入失败时，摇动动画就会启动。正确答案也是如此。动画仅在第一次显示。

当给出正确或错误答案时，如何再次调用动画。

<div class="alert alert-danger animated" 
  v-bind:class="{ 'shake': incorrect }" 
  v-if="incorrect">
  Code is incorrect
</div>

https://jsfiddle.net/mrklein/05sfmuc2/

new Vue({
el: "#app",
  data: {
    correct: false,
    incorrect: false,
    code: '1234',
    modelcode: '',
  },
  methods: {
    checkpwd: function(todo){
        if (this.modelcode == this.code) {
        this.correct = true;
        this.incorrect = false;
      } else {
        this.correct = false;
        this.incorrect = true;
       }
      }
    }
  }
);

Answer 1

您需要做的是让另一个变量作为动画的控件。您将在动画持续时间后重置该变量。我只是在我的例子中放了 1000 毫秒。如果您真的希望它是完美的，您可能需要对双击进行去抖动（即，如果他们在动画进行时单击，您并不是真的想要制作另一个动画，但也许您会这样做？）。

https://jsfiddle.net/lucuma/zawk41gh/

<div id="app" class="card" style="width:18rem;">
  <div class="card-body">

    <div class="alert alert-danger animated" 
    v-bind:class="{ 'shake': runAnimate }" 
    v-if="incorrect">
    Code is incorrect
    </div>

    <div class="alert alert-success animated" 
    v-bind:class="{ 'flash': runAnimate }" 
    v-if="correct">
    Correct code entered
    </div>

    <input v-model="modelcode" placeholder="password" class="form-control"> 
    <button class="btn btn-primary mt-3" @click="checkpwd">check</button>
    correct code is 1234
  </div>
</div>


new Vue({
  el: "#app",
  data: {
    correct: false,
    incorrect: false,
    code: '1234',
    modelcode: '',
    runAnimate: false
  },
  methods: {
    checkpwd: function(todo){
    this.runAnimate= true;
        if (this.modelcode == this.code) {

        this.correct = true;
        this.incorrect = false;
      } else {
        this.correct = false;
        this.incorrect = true;
       }
       setTimeout(()=> this.runAnimate = false, 1000);
      }
    }
  }
);