持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

在开发项目过程中，例如开发后台管理，一些动画在页面视觉体验起到起到画龙点睛的作用，如果没有动画的话，那么页面的显示与隐藏就会显得十分生硬，带来不好体验感，vue提供了transition组件，可以给任何元素和组件添加动画

一、transition的用法

transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中

插入或删除transition组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同

transition的属性

1. name:string类型,用于自动生成 CSS 过渡类名,例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
2. appear:boolean，是否在初始渲染时使用过渡。默认为 false
3. mode:string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行
4. duration:number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

实例：后台管理主要区域内容切换路由过渡动画

设置过渡类名为fade

<el-main>
    <transition  name="fade">
      <router-view />
    </transition>
</el-main>

那么css类名都以fade开头

进入过渡状态和离开过渡状态的动画
.fade-enter-active,.fade-leave-active{
  transition: all .3s ease;
}
//过渡开始和移除时的动画
.fade-enter,.fade-leave-to{
  transform: translateX(10px);
  opacity: 0;
}

效果