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

Question

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

我将2个布尔定义为正确答案的状态，我知道如果我输入相同的错误答案，错误的闪烁将保持为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);
}
}
}
);