vue的路由之间切换的动画操作(实例演示)

 以上是我们的vue官网的学习文档

其中我们的v所指的是我们的名字

下面进行实例演练

 在如下文档中我们将这样操作

首先我们将我们的App.vue的文件中将我们router-view（也就是我们的显示部分用我们的transition来进行包含）其中我们的transition命名用name。

然后我们在style代码段中添加了如下代码

.fade-enter {
 
  transform: translateX(100%);  
  /*左边是正值相对于自己的宽度*/
}

.fade-enter-active {
  transition: all 1s linear; //选中所有的时间为一秒
}

.fade-enter-to {
  transform: translateX(0);
  position: absolute;
  top:0;            //在我们的定位之后，设置的大小会消失，那么在我们的动画过程中就进行固定大小
   width: 100vw; //vw单位为viewpoint width 视界宽度
}

.fade-leave {
  transform: translateX(0);
}

.fade-leave-active {
  transition: all 1s linear;
  position: absolute;
  top:0;
   width: 100vw;
}

.fade-leave-to {
  width: 100vw;
  transform: translateX(-100%); 
}

 其中fade也正如我们的vue学习文档中的v一样

正常这样操作会遇到一个我们的切换所有的文案不会在同一条线上，那么我们可以使用一个父类元素通过定位的方式来将我们动画切换的内容相对来定位到同一条线上

在我们的第二张图片中我们定义了一个class名字叫做box的在我们的style中

.box{
position: relative;
}