Xtykutl

I am figuring out how I can re-animate the shake animation on an incorrect answer. Or the flash animation on a correct answer.

I defined 2 booleans as a state for the correct answer and I understand that if I enter the same incorrect answer the incorrect flash stays false. But how do I fix that the shake animations kicks in another time.

I made a fiddle, the correct code is '1234'. When you first fail to enter, the shake animation kicks in. Same is for the correct answer. Only the first time the animations shows.

How can I invoke the animations again when correct or incorrect answers are given.

<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;

       }

      }

    }

  }

);

What you need to do is have another variable be the control for the animation. You'd reset that variable after the duration of the animation. I just put 1000 ms in my example. You may need to debounce a double click if you really want it to be perfect (ie, if they click while the animation is going on, you don't really want to do another animation but maybe you do?).

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);

      }

    }

  }

);