duannx

@duandz/vue router transition

Transition plugin for vue router next

Version Version: 1.0.8 Version Updated: 04/05/2022 By: duannx License: MIT

DownloadsLast30Days: 27

https://github.com/duannx/vue-router-transition

npm i @duandz/vue-router-transition
yarn add @duandz/vue-router-transition

vue-router-transition

✨ Configurable and native-like page transition for Vue3 and vue-router-next

Demo

Why :question:

  • Light weight: Only one component added and optional pre-built css

  • Configurable: Easily config different transition for EACH route. Support reverse transition to make your app animation look like native.

  • Easy to use: Just need to install the package and add some configs to use. Easily integrate with other css library like Animate.css

Install :coffee:

Note: The plugin only support for Vue3+ and Vue Router Next (vue-router^4)

npm i @duandz/vue-router-transition
yarn add @duandz/vue-router-transition

Usage :rocket:

Import the plugin on your main.js

// src/main.js
import VueRouterTransition from '@duandz/vue-router-transition'
Vue.use(VueRouterTransition)
// Optional. Import css file if you want to use built in css
import '@duandz/vue-router-transition/dist/style.css'

Replace your router-view with RouterViewTransition component

<!-- App.vue -->
<template>
   <RouterViewTransition/>
</template>

Add config to your routes list

// routes.js
export default [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { // the plugin will use meta.transitons of your route
            transitions: {
                priority: 3, // smaller number - higher priority
                enter: 'fade', // transition when navigate to this route
                leave: 'fade' // transition when navigate from this route
            }
        }
    },
    {
        path: '/collection/:id',
        component: Collection,
        name: 'collection',
        meta: {
            transitions: {
                priority: 2,
                enter: {
                    name: '', // optional. It will render to {{name}}-enter-to {{name}}-enter-from {{name}}-leave-to {{name}}-leave-from
                    enterClass: 'animate__animated animate__rollIn', // integrate with animate.css.
                    leaveClass: ''
                },
                leave: {
                    enterClass: '',
                    leaveClass: 'animate__animated animate__rollOut'
                }
            }
        }
    },
    {
        path: '/product/:id',
        component: Product,
        name: 'product',
        meta: {
            transitions: {
                priority: 1,
                enter: 'slide-right',
                leave: 'slide-right-reverse'
            }
        }
    }
]

List of available transitions

  • fade
  • slide-left
  • slide-right
  • slide-up
  • sldie-down
  • zoom-in
  • More comming soon...

You can easily add your custom transition by providing a name and styling for it. This plugin is built on top of Vue3 Transition. Strong recommend to read Vue3 Transition before customizing the plugin. The classes to add style are: yourClassName-enter-from, yourClassName-enter-to, yourClassName-enter-active, yourClassName-leave-from, yourClassName-leave-to, yourClassName-leave-active

Props

props: {
  /**
   * Default class added when the transition active for all type of transitions
   */
  defaultClassTransition: {
    type: String,
    required: false,
    default: "transition-active"
  },  
}

Development

  • Clone the project
  • Install dependencies: npm install or yarn
  • yarn dev to watch build source code
  • cd dev && yarn dev to run the demo

TODO

  • Add demo
  • Add tests
  • Add more transition: slide-up, slide-down, zoom-in, zoom-out...
  • Support Vue2
  • Support all Vue3 Transition properties
  • Support breakpoints config
  • Support transition hooks
  • Clean readme

License

MIT

Copyright © 2020 vuejscomponent.com