Making transitions with JavaScript hooks

Besides making transitions with CSS, you can also do so with JavaScript by adding the following hooks to the <transition> component in a Vue app:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  //..
</transition>

Note that you also can declare the hook without adding v-on at the beginning. So, writing the hook as :before-enter is the same as writing v-on:before-enter.

Then, on the JavaScript side, you should have the following default methods in the methods property to correspond with the preceding hooks:

methods: {
  beforeEnter (el) { ... },
  enter (el, done) {
    // ...
    done()
  },
  afterEnter (el) { ... },
  enterCancelled (el) { ... },
...