vue 中 transition 过渡效果的使用，详解类名的添加时机

记一次学习过程 ， 在我们需要页面过渡效果的时候 ， 可能我们回去选择 animate.css 中的一些效果
但是vue 官方给我们提供了一个内置组件 ，
大致浏览我们可以知道，就是用类名去控制页面切换的效果 ， OK，那我们就在项目中使用它一波 ，
从github 上下载的开源项目App.vue的截图

这是template模板部分，大致就是 给router-view 绑定了v-slot在项目运行的的时候，vue会把组件名称传入进去。然后 component去切换组件 ，但是在外面嵌套了一层 transition. name 绑定了我们即将添加类名的前缀 。

这是相对应的类名。大家自动忽略 slide-right 前缀的以免混淆。下面主要说 slide-left前缀的。在我们进行页面切换的时候。我们打开控制台观察app 下面组件类名的添加情况。

在我点击的一瞬间，大家可以看到这两个页面是共存的，也就是，起始页面有类名 slide-left-leave-active这个类名 离开前的活动，目标页面上面有 slide-left-enter-active 这个类名 ， 进入的活动 ，过了 3000 ms 起始页面消失 ， 两个类名都被移除 。 如图，只剩目标页面

到这里我们就可以回去看看这两个类名做了什么 。

slide-left-leave-active ： 首先添加了transition 3000ms , 这就是 3000ms后 起始页面就消失了 ，具体是怎么消失的呢 ， opacity : 0 ; 透明度变成 0 ， transfrom : translate3d : (-100% , 0 , 0 ) 沿着轴左移 100% ， 因为加了transiton ， 一遍有透明度的变化 ， 一边左移 ， 就有了这个左移消失的效果 。

slide-left-enter-active ： 直接展示 ，没有什么变化的效果。

致此就有了点击上一个页面左滑动消失的效果。上面的那个 slide - right前缀的类名 ，我们可以在路由表里面进行mate 里面定一个属性 ， 如果是childen 子页面 属性值就大一点 ， 然后 监听 $route 对name赋值就可以实现，子页面返回 右滑动的效果。

上午写完了，下午发现 ， 组件的切换一定要有一个根节点 ， 并且这个根节点可以添加 transition属性 ， 也就是 div 这些html标签啥的，我直接在template 下面放了三个组件结果动画效果就是出不来 。解决了就好。又是进步的一天。