vue transition-group appear event not being called

Question

I am trying to hook into the appear event lifecycle and call a method in the component but the method getCalled() in my component is never called upon. The transition animation for after-leave event works as intended its just the appear events that do not.

according the documentation https://v2.vuejs.org/v2/api/#transition I can hook into the appear event system as demonstrated.

<transition-group name="order" tag="div" appear v-on:after-leave="activateScrollToBottom" v-on:after-appear="getCalled" v-on:before-appear="getCalled" v-on:appear="getCalled">

Answer 1

I had a similar situation and found out that I was missing the done callback in the appear method.

I put together a very simple CodePen to see, if it is actually working https://codepen.io/rowild/pen/LJvEKm

JavaScript:

let app = new Vue({
  el: '#app',
  methods:{
    // Transition hooks
    beforeAppear(el){
      console.log('  BEFORE APPEAR')
    },
    appear(el, done){
      console.log('  APPEAR')
    },
    afterAppear(el){
      console.log('  AFTER APPEAR')
    }
  }
},
// Lifecycle hooks
beforeCreate(){
  console.log("BEFORE CREATE")
},
[...]

Template

<div id='app'>
  <transition
    appear
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
    @appear-cancelled="appearCancelled"
    :css="false"
  >
  <p>TEST CONTENT</p>
  </transition>
</div>

Console output

BEFORE CREATE
CREATED
BEFORE MOUNT
  BEFORE APPEAR
  APPEAR
  AFTER APPEAR
MOUNTED

In case you found, what your problem was, would you mind to post an explanation and how you solved it? Thank you!