HTML

vue transition

<transition name="wrapper">
	<span v-if="show"></span>
</transition>
<script>
export default {
  data () {
    return {
      show: true
    }
  }
</script>
<style scoped>
  .wrapper-enter-active {
    animation: finished 2.5s reverse;
  }
  .wrapper-leave-active {
    animation: finished 2.5s;
  }
  @keyframes finished {
    0% { opacity: 1; top: 0;}
    50% { opacity: 1; top: 0;}
    60% { opacity: 1; }
    100% { opacity: 0; top: -100vh;}
  }
</style>

transition vue

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

vue transition enter before

<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>

vue transition example

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

transition initial vue

<transition appear>
	<div ></div>
</transition>