Vue Routing The left slip and right slip effect example

How to implement the left slide and right slip when the Vue routing is switched, because the original writer USTBHUANGYII teacher has no such effect, so she wants to do this, watching QQ, WeChat Didn’t have this effect, and finally found that segmentfault and the two apps of the Nuggets have such an effect, and this is to start with this.

First, look at the example of the official website into the animation:


New Vue ({EL: '# Demo', Data: {Show: true}}
.fade-enter-active, .fade-leave- Active {transition: Opacity.5s;}. fade-enter, .fade-leave-to {opacity: 0;}
 left and right switching effect   
We must implement the effect of left and right switches, so we must define two animations (left sliding and right slip)
.TransitionBody {Transition: all 0.15s ease; / * Define the time and transition effect of the animation * /}. TransitionLight-Enter, .TransitionRight-leAve-active {-Webkit-Transform: Translate (100%, 0); Transform: Translate (100%, 0); / * When left sliding into the right slip into the transition animation * /}. TransitionLight-Leave-Active, .TransitionRight -Enter {-Webkit-Transform: Transform: Translate (-100%, 0);}

HTML part

Heep-alive is the built-in component of the Vue, which can keep the status in the memory during the component switching process to prevent repeated rendering DOM, we have to wrap it in the Transition tab, otherwise the page The animation will be renouched and switched will also calm

JS section

In the VUE component, the DATA must be a function, mount the object {transitionname: ‘transition’} into the Vue instance, Then we can listen to the route to and from to determine whether the left slip or right slip is to dynamically switch the TRANSITION NAME value.

Export Default {data () {return {transitionname: ‘transition’};}, watch: {‘$ route’ (to, from){const arr = [‘/ goods’,’ / Ratings’, ‘/ seller’]; const compare = arr.indexof (to.path)> arr.indexof (from.path); this.transitionname = compare? ‘TransitionLTLT ‘:}}
  Click on the link experience: The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment