Vue’s transitions don’t work when you refresh the browser?

Vue’s Transitions don’t seem to work when you refresh your browser.

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:leave="leave"
>
  <!-- ... -->
</transition>

methods: {
  beforeEnter: function (el) {
    console.log('before enter')
  },
  enter: function (el, done) {
    console.log('enter')
    done()
  },
  leave: function (el, done) {
    console.log('leave')
    done()
  }
}

For instance, when I click to go to http://myvue.com/#/foo I get the transitions and all the console logs. But I don’t get the transitions and the logs when I refresh my browser on http://myvue.com/#/foo

Any ideas?

Answer

<transition
  appear
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:leave="leave"
>
  <!-- ... -->
</transition>