Vue-router implementation webApp switch page animation effect code

Vue-router implements the WebApp switching effect

vue-router实现webApp切换页面动画效果代码

Rapid integration

1. Copy PageTransittion.Vue to the project directory. 2. Modify the Router configuration.

Router.Prototype.goback = function () {this.isback = true window.history.go (-1)} const router = new router ({routes: [{Routes: {PATH: ‘/’, Name: ‘PageTransition’, Component: PageTransition, // Introduced page switching components Children: [{path: ”, Component: index // Parent Routing Access page, for example, visit www.aa.com / Displayed is Index component}, {path: ‘/ pagea’, Component: Pagea // Subwatering component, for example, visited www.aaa.com/pagea is displayed as pagea}, {path: ‘/ pageb’, Component: Pageb // Subwatering components, for example, access www.aaa.com/pageb is displayed as PAGEB}]}]}
   
Record page status

To implement the page, you must first know the page status (ie, the page is entering the next page, or back), we can rewrite the router.The Go method records the return state. If the page needs to be retired, the call

$ router.go (-1)

  Modify Router / Index.Vue  
// Enhanced the original method, the advantage is that the old business module does not need any change router.prototype.go = function () { This.isback = true window.history.go (-1)} // or you can create a new method Router.Prototype.goback = function () {this.isback = true this.go (-1)}

When the new router, the instance contains the Go / Goback method.
 Listening routing   
Use a nested route to introduce a sub-page, listening to the root routing UPDATE hook to do the corresponding operation.

BeforouteUpdate (to, from, next) {// If ISBACK is TRUE, prove that the user clicks the rollback, execute Slide-Right Animation Let IsBack = THIS. $ router.isback if (isback) {this.transitionname = ‘slight-right’} else {this.transitionname = ‘slide-left’} // After returning back, set to the forward animation, otherwise open the next time Page animation will also retreat to this. $ Router.isback = false nexT ()}

Animation Effect Animation

   

CSS code

 .Child-view {position: absolute; width : 100%; transition: all .8s cubic-bezier (.55, 0, .1, 1);}. Slight-left-enter, .slide-right-leave-activ {Opacity: 0; -Webkit-Transform: Translate (50px, 0); Transform: Translate (50px, 0);}. slide-left-leave-active, .slide-right-enter {Opacity: 0; -Webkit-Transform: Translate (-50px, 0); Transform: Translate (-50px, 0);}   Routing setting   router / index.js   
Const router = new router ({routes: ‘PageTransition’, Component: PageTransition, Children: [{// This route is the default route path: ”,Component: index}, {pat: ‘/ pagea’, component: pagea}, {path: ‘/ pageb’, component: pageb}]}]}

 GitHub Address: https://github.com/zhengguorong/pageainimate   The above is all of this article, I hope to help everyone, I hope everyone will support Tumi Cloud. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment