/*vue官方的例子*/
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    /*下面的v-if来操作DOM元素，从而vue是可以知道元素的插入和移除的*/
    <p v-if="show">hello</p>  
  </transition>
</div>

?这个是我项目里的通过v-bind:showModal来操纵DOM元素

二、具体是怎么操作过渡的呢？

1.过渡的类名

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

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

?直接看上面这一段可能会有点懵，所以官网也给了一张非常经典的图

?这张图想要表达的其实很简单，vue将过渡动画分为了两个部分Enter（进入）和Leave（离开）

并且有很好的代码对称性（关于代码对称性，后面还有提到）

每个部分都是由起始和结束??两个节点??和??一个过渡阶段??组成的

这里我们先给出一个概念，我们把Enter(进入)动画和Leave（移除）动画中间的那个状态称为“原状态”。也就是元素不在动画时，常驻的那个状态

?2.Enter（进入）过渡动画

下面我们主要先从Enter(进入)这个部分理解vue的过渡动画

v-enter （起始节点）

其实很容易理解，对过渡动画进行初始化。一个起始的点，决定了动画从哪里开始。

官网里还有特别强调说v-enter是在元素插入之前就生效了的，也就是确保了动画能从v-enter的地方开始过渡。且在元素插入的下一帧就移除了，这个是很关键的，说明v-enter只关注与动画的起始那个节点，一旦元素插入进来了，过渡动画开始跑了，就不归v-enter来管了。

打个比方，我们想要做一个从上面滑动进入的过渡动画，起始节点就可以设置v-enter里的属性top:-100%（这里我的是slide-enter而非v-enter是因为我在transition里定义了name属性）

?v-enter里top:-100%就是相对于“原状态”的位置，设置一个top值比“原状态”更小的起始值，让元素一开始从更高的位置进入，来开始这段过渡动画。

从上面了解到，过渡动画的值是?相对于? “原状态”的值来设置

v-enter-active（过渡阶段）

v-enter-active用来定义过渡动画的过程，它拥有最长的持续时间，包括了整个Enter(进入)动画的持续时间。

?同时我还发现一个特殊的情况，v-enter-active和v-enter都是可以定义过渡动画的起始节点的。

?像上面我们把v-enter的初始化节点写到v-enter-active里，并且把v-enter给注释掉，动画仍然能正常跑起来

?这个时候又出现了一个问题，如果两个都写上了不同的top值呢？

?答案就是后定义的会覆盖先定义的生效

?效果如图，元素在top:-10的位置开始动画

v-enter-to（结束节点）

官网对它的描述是在元素被插入之后即刻生效，其实也可以理解成v-enter-to紧接在v-enter失效后就生效，（形象化的说，就是v-enter把接力棒传给了v-enter-to）v-enter-to本身的生效时间还是挺长的。因为v-enter只在很短的瞬间做了一个初始化的操作，就把接力棒传给v-enter-to了，然后v-enter-to一直持续到Enter（进入）动画的结束。

这里同样有一个和上面类似的现象，在v-enter-to和v-enter-active里面都是可以定义动画的过程。这同样也验证了v-enter-to的持续时间很长，相比v-enter-active只少了一个v-enter的持续时间。

?像我们这里对Enter(进入)过渡动画只定义了起始节点v-enter和v-enter-to，把v-enter-active省略，

并且把transition：all .5s；写到了v-enter-to里，但是这里的transaction：all.5s;仍然能生效，就和写在v-enter-active是一样的效果。

?效果如下图：（像我项目里设置的是点击购物车图标触发DOM元素插入）动画就是提示框从上面滑动进入

?常规的写法我也贴出来放在这里：

常规的写法里就是v-enter设置初始点，v-enter-active设置整个过渡的过程，v-enter-to设置最后动画结束的节点(这里写的是top:0%;其实就是保持和“原状态”一致)?

因为这里的v-enter-to和“原状态”一致，所以其实v-enter-to在这里是可以不用定义的

?常规写法的效果跟刚刚是一样的：

?被隐藏的一段过程

我还发现了一个被隐藏的一段过程

?像这里我们把v-enter-to设置成和“原状态”不一样的状态,看看动画的效果:

?发现动画滑动进入到在v-enter-to的地方后就会直接闪回“原状态”的位置了

那么我们有没有可能让这个闪回的过程也变成过渡动画呢？

?其实是可以实现的。我们直接把transition写到元素的最大的类里面。

这里为了看的更清晰，用的是1s的持续时间。

?效果如下图

?动画是滑动进入到v-enter-to的位置，然后再滑动到“原状态”的位置

?由此认为在v-enter-to 到“原状态”的过程，也是可以加上动画的一段过程，而非说v-enter-to就一定是进入动画的结尾。

?总结

? ? ? ? ?在这里我们小小的总结一下Enter(进入)过渡动画的过程，分为了三个部分，这三个部分并非“泾渭分明”，而是在功能上有一定的重叠，并且有时v-enter-to到“原状态”还是能有一段过渡动画的。

?暂时还没找到好用的作图工具，手画了一张大致的过程

3.Leave（移除）过渡动画

我们在之前也有提到说Leave(移除)过渡动画中也是由v-leave? v-leave-active? v-leave-to两个节点和一个过程组成。但是Enter(进入)和Leave(移除)还是有些不同

?v-leave

? ? ? ? v-leave应该是最特殊的一个了，我在代码中对v-leave进行定义，往往出现的情况就是定义的属性不生效或者导致整个Leave（移除）动画都不生效了，并且很难在别人的帖子里看到对v-leave的使用。而且v-leave存在的意义也很奇怪，一个元素的移除不就都是得从“原状态”开始吗，那么v-leave的意义在哪呢？