[Vuejs]-Before-leave transition JavaScript hook not working Vue js

by

0👍

The before-leave event won’t fire until you remove the .componentMain element.

Here’s an example:

new Vue({
  el: '#app',
  data () {
   return {
     transitionName: 'right',
     show: true,
   }
  },
  methods: {
    beforeLeaveHook() {
      this.transitionName = 'left';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition :name="transitionName" v-on:before-leave="beforeLeaveHook">
    <div class="componentMain" v-if="show">
      <h1>
        {{transitionName}}
      </h1>
    </div>   
  </transition>
</div>

0👍

Thanks for the help. I needed route specific transitions for my app. I solved the problem using beforeRouteUpdate(to, from, next) in the parent component to check the from and to paths before calling next(), in order to set the correct transition, using Vuex, and then using a computed property in my child component to listen for the transitionName change.

Leave a comment