Question

我正在弄清楚如何在错误答案上重新动画动画。或Flash动画上的答案正确。

我将2个布尔值定义为正确答案的状态，并且我了解如果输入相同的错误答案，则错误的Flash保持为假。但是，我该如何解决摇动动画在另一时间开始的问题。

我做了一个小提琴，正确的代码是'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/

sudo apt-get install fortune || (echo "Installation failed" ; exit)
echo "Installation successful"

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

1 个答案: