Vue transition hooks not working

Get Help
#1

Trying to use the leave event hook but doesnt work, it only work on the beforeEnter hook? What am I doing wrong?

<transition name="fade" @leave="slideToElement('#HouseHold')">

methods: {
 slideToElement() {        
   debugger;      
 }
}

.fade-enter-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
#2

You need to call done() within your leave function. Have a look at the docs https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

1 Like
#3

I registered to say thank you

1 Like
#4

I landed on this post after trying to solve a problem with transition functions not firing. The suggested fix here was not relevant to my problem but I eventually found the solution by scouring Vue changelogs. I thought I’d leave a comment to help anyone who has the same problem and ends up here. A bug fix in Vue 2.6.10 (fix(transition): looking up `context` of transition by shasharoman · Pull Request #9668 · vuejs/vue · GitHub) appears to have broken previously working transitions that don’t have the appear attribute in the transition wrapper. All I had to do was add appear and everything worked as expected (Enter/Leave & List Transitions — Vue.js). Hope this saves someone the trouble I had :blush: