Setting class with v-bind not happening correctly

Question

I am trying to have an element animate differently depending on the user action. For example, when I click the "go right" button I want the p tag to move right to exit. And when I click the go left button the p tag will move to the left to exit.

Right now what happens is the element will exit in whichever way I PREVIOUSLY had clicked the button. So the first time I click "go right" the element will just immediately disappear without animation. Then if I click "go left", the element will now animate right, instead of left. And then if I click "go right" after that it will now move the left.

As you can see I try to set the leaveClass value which is bound to the animation class before I hide the element but it seems like it is only registering the leaveClass value after I hide the element. Can't figure out why.

<button @click="nextCard(true)">
  Go right
</button>
<button @click="nextCard(false)">
  Go left 
</button>

<div id="card">
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeIn"
    v-bind:leave-active-class="leaveClass"
  >
    <p v-if="show">this is text</p>
  </transition>
</div>

<script>
export default {
  data () {
    return {
      show: true,
      leaveClass: '',
    }
  },
  methods: {
    nextCard: function (correct) {
      this.leaveClass = correct ? 'animated bounceOutRight' : 'animated bounceOutLeft'
      this.show = false
      setTimeout(this.showNewCard, 400)
    },
  }
}

Answer 1

Just had to use the $nextTick() method to wait for the data to be updated.

  this.$nextTick(function () {
    this.show = false
  })