vue page transition example

Example 1: 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>

Example 2: vuejs transition to switch between pages

<!-- App.vue -->
<router-view v-slot="{ Component }">
  	<transition name="slither" mode="in-out">
    	<component :is="Component"></component>
	</transition>
</router-view>