一、前言
vue虽然给我们提供了大量简化版的节点操作和组件封装，他还支持快速创建过渡效果和动画，下面一起来看看吧。
二、过渡
过渡其实本质上就是一个显示隐藏的效果，一般我们在做显示隐藏的时候我们都使用v-show，非常简单的就能实现；不过vue还给我们提供了过渡的组件供我们使用，我们可以通过这个组件来定义丰富多样的过渡效果。
1.默认过渡
在使用过渡之前，我们需要先定义一些该组件要使用到的css规则，如下;
<pre spellcheck="false" lang="cmd" cid="n38" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定义过渡时间、曲线等
v-leave：定义下半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
v-leave-to：定义下半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等</pre>
下面来看看如何制作一个过渡效果，如下：
此时就实现了过渡效果。
2.具名过渡
那么问题来了，如果，过渡的效果比较多，这样肯定是不行的，毕竟每个过渡效果肯定都不会一样，因此这个时候我们需要给这些过渡效果添加一个名字，如下：
此时，咱们的过渡就只能使用name开头的才能实现效果了，默认的v开头的就失去了作用，因为他只会作用在没有声明name属性的transition组件上，此时便会产生六个过渡的css规则。
3.自定义过渡类名
它是通过修改过渡的各个阶段的类来实现的，如下:
由于这种方法比较麻烦，故不推荐使用，小编建议大家使用第二种。
4.过渡事件
我们不光可以通过css来控制过渡效果，还可以通过事件来控制，一般有如下事件：
<pre spellcheck="false" lang="cmd" cid="n69" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled</pre>
来让我们看下这些事件的执行顺序，我们随便挑四个来看下效果，如下：
5.初始化使用过渡
transition还支持初始化页面就显示过渡效果，只需要设置一个属性即可，如下：
只不过使用后会有警告。
6.选择过渡模式
目前支持两种，如下：
<pre spellcheck="false" lang="cmd" cid="n93" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">out-in 淡出
in-out 淡入</pre>
默认情况下两种一起进行，如下：
指定模式后，该transition组件下的所有标签的显示方式都按这个模式的来。
7.过渡持续时间
如果想要过渡持续时间长点，可以修改时间，如下：
其实过渡可以设置开始和结束的时间，如下：
<pre spellcheck="false" lang="cmd" cid="n124" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">duration=“{enter:6,leave:6}”</pre>
transition不支持多个标签或者组件的存在，除非是动态组件，如果同时加载多个组件或者标签，建议使用多元素过渡。
三、多元素过渡
虽然上面的过渡组件很强大，只不过该过渡组件里面最多只能放一个标签进去，如果放多个标签或者组件的话，会出问题，除非是动态组件，因此我们需要使用多元素过渡组件，如下：
四、动画
动画效果也是在过渡组件中实现的，只不过我们需要设置一些动画的帧，设置的越多越详细，动画就越丰富多彩，不过前提是你的css3的基础要够好，如下：
五、总结
以上就是vue中的关于过渡和动画的全部知识了，比较简单总体来说，这玩意了解下就好了，没必要深究，后面还有很多优秀的ui框架等着我们去学习，重复造轮子不如直接拿来用现成的，本文源码获取只需关注公众号"简易编程网"并后台回复vue10即可。
