Introduction

Vue Page Element Transition is a Simple Vue Plugin That Creates Transitions Between Elements On Different Pages:

Usage

To start using the plugin, install it to your project:

npm i vue-page-element-transition

Import it

import vueElementTransition from 'vue-page-element-transition'

// ...

app.use(vueElementTransition)

Use vue transitions

<RouterView v-slot="{ route, Component }">
 <Transition>
   <component :is="Component" :key="route.path" />
 </Transition>
</RouterView>
//...
<style>
.v-enter-active, .v-leave-active {
 transition: opacity 0.5s ease;
}
</style>

And add the "v-element-transition" class to the target elements

<div v-element-transition>Example</div>