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

Question

我正在弄清楚如何为错误答案重新制作摇动动画。或者正确答案上的 flash 动画。

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

我做了一个fiddle，正确的代码是'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);
      }
    }
  }
);

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

How do I invoke the animation again when state stays the same

vue.js

animate.css