transition之页面切换过渡动画

推荐文章 ---------transition之页面切换过渡动画

实现步骤

1.0 使用 <transition></transition>组件包裹动态路由组件<router-view></router-view>

vue 中常见的内置组件:
 <transition>  </transition>
 <keep-alive> </keep-alive>
  <router-view></router-view>

在实际项目中，我们往往会使用transition实现路由组件之间的动画切换效果，也会使用keep-alive防止重新渲染，所以就会涉及到包裹的顺序

<template>
  <div class="myindex">
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="this.$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    </transition>
    <TabBar />
  </div>
</template>

2.0 在路由设置中设置meta的index的值，通过index值的大小控制页面跳转层级顺序

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
  { path: '*', component: ()=> import('@/views/NotFound') },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/',
    component: () => import('@/views/Index'),
    children: [
      {
        path: 'home',
        name: 'home',
        meta: { 
          keepAlive: true,
          index:0
         },// 这个子组件需要缓存 true
        component: () => import('@/views/Home')
      },

      {
        path: 'qanda',
        name: 'qanda',
        meta: { keepAlive: false,  index:1 },
        component: () => import('@/views/QA')
      },
      {
        path: 'video',
        name: 'video',
        meta: { keepAlive: false,  index:2 },
        component: () => import('@/views/Video')
      },
      {
        path: 'wode',
        name: 'wode',
        meta: { keepAlive: false,  index:3 },// 这个子组件不需要缓存 
        component: () => import('@/views/Wode')
      },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login')
  }
]

const router = new VueRouter({
  routes
})

export default router

3.0 使用watch属性 监听$route的变化来比较to和from对应的的路由配置中的meta的index，决定动画效果（如 前进向左滑动(下一页)，后退向右滑动（上一页））

<template>
  <div class="myindex">
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="this.$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    </transition>
    <TabBar />
  </div>
</template>
<script>
export default {
  data() {
    return {
        transitionName:''
    };
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > 0) {
        if (to.meta.index < from.meta.index) {
          this.transitionName = "slide-right";
        } else {
          this.transitionName = "slide-left";
        }
      } else if (to.meta.index == 0 && from.meta.index > 0) {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>
<style>
	.slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,
	.slide-left-leave-active {
	  will-change: transform;
	  transition: all 0.3s;
	  position: absolute;
	  width: 100%;
	  left: 0;
	}
	.slide-right-enter {
	  transform: translateX(-100%);
	}
	.slide-right-leave-active {
	  transform: translateX(100%);
	}
	.slide-left-enter {
	  transform: translateX(100%);
	}
	.slide-left-leave-active {
	  transform: translateX(-100%);
	}
</style>

值得注意：
防止出现组件切换从中间向上的切换效果，一定要给过渡的类选择器中添加 ： position:absolute

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.3s;
  /* 一定 要使用绝对定位*/
  position: absolute;
  width: 100%;
  left: 0;
}

总结：
transition组件 使用 动态绑定 name 的方式 实现 多组件之间的切换过渡效果,想要实现过渡效果需要配合过渡的css类名:
  name-enter:定义进入过渡的开始状态
  name-enter-active:定义进入活动状态
  name-enter-to:定义进入的结束状态
  name-leave:定义离开过渡的开始状态
  name-leave-active:定义离开的活动状态
  name-leave-to:定义离开的结束状态
transition 组件有两种过渡模式：使用 mode属性设置
   in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式
  out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入