Vue-router implements navigation switching transition animation effect

Transitional effect

Provides the encapsulation component of transition, adds transition animation, and implements by adding or removing css class names.

Transitional css class name:

v-enter enters the beginning of the transition

v-enter-active enters active state

v-enter-to enters the end state

v-leave leaving the beginning state of transition

v-leave-active leave activity status

v-leave-to leave end state

Transition mode:

in-out first in and out

out-in first and then in

usage:

Make a faint effect

Put the elements you want to move into <transition></transition> and set the mode.

<transition mode="out-in">
 <router-view class="center"></router-view>
</transition>

Write the action in style:

.v-enter{
 opacity: 0;
}
.v-enter-active{
 transition: 0.5s;
}
.v-enter-to{
 opacity: 1;
}
.v-leave{
 opacity: 1;
}
.v-leave-to{
 opacity:0;
}
.v-leave-active{
 transition: 0.5s;
}

It's OK!

Dynamically set name

Then make an x-axis slide left and right to enter the disappearing effect.

.left-enter{
 transform:translateX(100%);
}
.left-enter-to{
 transform:translateX(0);
}
 
.left-enter-active{
 transition: 1s;
}
.left-leave{
 transform:translateX(0);
}
.left-leave-to{
 transform:translateX(-100%);
}
.left-leave-active{
 transition: 1s;
}

Use name to dynamically set the effect in the transition tag. At this time, delete mode="out-in" to connect naturally.

<transition name="left">
  <!--<router-view name="slider"></router-view>-->
  <router-view class="center"></router-view>
 </transition>

Switch to the right:

.right-enter{
 transform:translateX(-100%);
 }
 .right-enter-active{
 transition: 1s;
 }
 .right-leave-to{
 transform:translateX(100%);
 }
 .right-leave-active{
 transition: 1s;
 }

To achieve the left left and right switch to the right

Routing meta information

In routing configuration, meta can configure some data and use it in routing objects.

Access data in meta: $

That is to say, in addition to the routing configuration information provided, we can also customize the desired data through meta.

Implement left to the left and right to the right to the right:

step1：Add index to each component separately. If the index of the target route is large, slide to the right, otherwise to the left.

meta:{
  index:0
  }

0,1,2,3 like this.

step2：Monitor routing information objects (the reasons mentioned in the previous article) and you can get the index of the left and targets

watch:{
 $route(to,from){
 ();//Target navigation subscript ();//Leave navigation subscript }
}

step3: Get the mark, compare and set the class name

watch:{
 $route(to,from){
  if(<){
  ="right"
  }else{
  ="left"
  }
 }
 },
 data(){
 return{
  index:'/home',
  names:'left'
 }
 }

The above article on vue-router's navigation switching transition animation effect is all the content I share with you. I hope you can give you a reference and I hope you can support me more.