vue transition on entire component code 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
<router-view v-slot="{ Component }">
<transition name="slither" mode="in-out">
<component :is="Component"></component>
</transition>
</router-view>