VUEG

To add a transition effect to vue-router, just need vue.use (vueg) to get the transition effect and determine whether to move forward or backward based on the URL level (/) and history.

just need to add Vue.use(vueg) ,vue-router will have a transition effect.

Renderings/Demo:

live demo | GitHub

Actual combat effect of the project:

Usage/Usage

0. Installation

 npm i vueg -G
Copy the code

1. Introduce the plugin/Get Started

Import Vue from 'Vue' import App from './App' import router from './router' // ↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓ import vueg from 'vueg' Import 'vueg/ CSS /transition-min.css' vue. use(vueg, router) //← Note that this sentence should be followed by router = new VueRouter({})Copy the code

The app now has the default transition effect capability.


add v-Transition =”false” to disable animation

<template>
    <div id="app">
        <router-view v-transition="false"></router-view>
    </div>
</template>
Copy the code

Configuration item/Config

Const options={duration: '0.3', // Duration of transition animation, 0.3 by default, in seconds firstEntryDisable: FirstEntryDuration: '.6' BackAnim: 'fadeInLeft', // Backanimation: 'fedeInLeft ', sameDepthDisable: False, // Disable animation at the same url depth. Default is false tabs: [{name:'home'},{name:'my'}], // default is [], name is the name of the corresponding route, in order to achieve the effect of clicking TAB page horizontal transition in app, such as TAB [1] to TAB [0], backAnim animation will be used, TAB [1] + TAB [2] + forwardAnim tabsDisable: false } vue. use(vueg, router,options)} vue. use(vueg, router,options)Copy the code

ForwardAnim and backAnim provide the following values: bounce Flash Pulse rubberBand Shake headShake Swing…. A little… SlideInDown slideInLeft slideOutDown slideOutLeft slideOutRight slideOutUp to preview slideInDown slideOutLeft slideOutRight slideOutUp, and to see all of the available values, visit: Daneden. Making. IO/animate. CSS…

Options can also be configured in each component’s data, for example:

Data (){return {vuegConfig:{forwardAnim:'bounceInUp', //options all configurations can be written in this object and overwrite the global configuration. You need to configure disable to false in component data.vuegConfig to enable}}}Copy the code

Some points to note: 1. Development and debugging based on VUE V2.3.4; 2. After using this plugin for a non-new project, CSS problems may cause some typographical errors in the original elements during animation transitions, so CSS needs to be adjusted.

add class to

and set min-height:100%; Vueg/CSS/transite-min. CSS can be edited to delete the animation styles that are not needed.