vue的transition

介绍

vue的动画标签transition

vue动画

vue动画本身没啥说的，就是套了一个transition开始写css就行了，麻烦的是实际使用动画的时候，往往是跟路由绑在一起的

然后我就看到了各种诡异的玩法...

基本知识

直接加transition，如果某路由/组件专用，就加在template 里面，如果共用，就加在router-view里面

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

这个看上去挺阳间的————所以基本没啥用，复杂一点的情况完全处理不了

延申

（这是在前一个基础上多做的，并不是和1反着来）所谓的复杂情况，那自然就是跟路由相关，在某某路径上，才会执行某某的动画

和路由有关，其实就又有一大堆说法了，因为影响因素是路由，那么一定需要能读到路由的东西

也就有了

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

就是读$route，再决定安置什么动画

亦或者在路由守卫处去读取，写法也差不多

但这样的话，有几个页面就要做多少次判断，前者还好，路由守卫的话绝对人直接写没

如果要改请让我直接去世

这种重复出现在各种地方的东西，就需要有个东西去做状态管理， 基本上又有两个思路了，

1. 标准的状态管理那自然就是vuex，把所有路由及其对应的动画先记录在这，每个页面去watch然后去vuex里面找就行了。虽然写起来还是自闭，但改起来没难度

2. 第二个想法又跟路由有关了，因为此时并不需要真正的状态管理，因为哪条路径执行对应动画实际上是写死的，我们只需要一个状态存储加读取即可，而所谓的router本质上仍是个对象，仍可以将信息存进去并读出来，也就是把对应的动画名写进注册时的元信息，然后在路由守卫中读取对应的元信息设置对应的动画即可

这是我偶然偷瞄抄来的，思路清奇

此外注意一下过渡模式：

default：//淡入和淡出过渡同时发生
in-out：//新元素首先淡入。 然后当前元素淡出。
out-in：//当前元素先淡出。 然后新元素开始淡入。