今天简单的学习了vue中的动画（其实这部分应该说过渡更为妥当），下面直接贴例子，简单谈一下自己的理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue.js"></script>
<style>
/*显示到隐藏的过程，这个作为初始状态。在响应动画的一瞬间被添加，但是又马上被删除*/
.v-leave{
opacity: 1;
color:yellow;
}
/*在动画执行的过程中，下面两个样式会被添加，直到执行完毕后，全部移除,leave-to为最终态
但是在动画逐渐消失的过程中，会出现渐变的红色。*/
.v-leave-active
{
transition: opacity 3s;
}
.v-leave-to
{
opacity: 0;
color:red;
}
/*从显示到隐藏的过程，这个作为隐藏的一个开始状态，在动画响应开始的一瞬间被添加，然后又马上被移除*/
.v-enter
{
opacity: 0;
color:blue;
}
/*在动画执行的过程中，下面两个样式会被添加，并以enter-to为最终态，但是最终态的这个样式也会被马上移除，所以最终还是会变成黑色。
*/
.v-enter-active
{
transition:opacity 3s;
}
.v-enter-to
{
opacity: 1;
color:green;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app">
<!--transition包含的块儿都会被以动画的方式执行，自动加上样式。-->
<transition>
<div v-if="show">显示内容</div>
</transition>
<button @click="toggle">切换</button>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
show:true
},
methods:
{
toggle:function()
{
this.show=!this.show
}
}
})
</script>
</html>vue中的动画是有一个周期在里面的，个人理解是分三个阶段。响应动画时的初始状态，以及动画变换的过渡态，以及最终的状态。动画结束后所有的样式都会被移除。transition是vue中自带的标签，它代表了这个里面包含的内容是动画。其中的需要响应的内容，会动态的加上样式来进行显示。我试着先没在vue中的style标签中写样式，看它是否能出现加载样式，哪怕是只有名字的空样式也行，但是实际上并没有。假如只有一个transition是不起作用的。
那么我们如何在里面加过渡效果呢？transition是有这样的一个规则的，如果我这个transition中有name属性，那么我加的动态的过渡样式都要以这个name属性加上横线的方式来命名。就拿那个最经典的例子来说吧，比如我这个name就叫fade。那么我加的动态的样式名都要加横线，比如我离开时候的初始态就叫：fade-leave。如果我这里不给name名称的话，比如我上面贴的代码，它们的样式就要以v-开头命名。比如我现在定义的离开初始态就叫v-leave。
接下来。想具体分析一下从显示到隐藏、从隐藏到显示的这样一个过程。个人理解这个过程是这样的。
从显示到隐藏
v-if控制显示和隐藏这个逻辑这里我就不说了。不作为本次说明的重点。重要的是产生这个响应的过程。
当这个响应发生的时候，我会马上响应初始态的内容。所以v-leave中的内容会马上响应出来。我在这里验证的时候特意添加了一个字体变黄。为了监测这个过程。但是这个过程很短，马上就会消失。也就是说明v-leave中的内容马上被移除，v-leave-to和v-leave-active被添加。正如他们的名字代表的一样，v-leave-active代表的是执行态，也就是动画正在过渡中进行时的状态，v-leave-to代表的是完成态。我对opacity这个过程进行一个渐变，由于这两个样式都被添加上去，那么我所看到的就是先变黄（很短，甚至看不到），然后变红，直到消失。最后，这个v-leave-to的样式也被移除，也就啥也看不到了。给出下面的一个过程更为直观：
1.加载v-leave样式，作为初始态。瞬间v-leave被移除。
2.渐变完成动画，v-leave-active和v-leave-to都被加载，动画逐渐完成。
3.v-leave-to作为终结态，然后移除v-leave-to。
从隐藏到显示
隐藏到显示和这个的道理是一样的。也是分为三个状态来完成。
1.加载v-enter作为准备入场的初始态。（此处因为我设置了不可见度为0，所以即使设置为蓝色字体我也看不见。更何况这个动作很短，基本上没有办法判断）。瞬间v-enter被移除。
2.渐变完成动画。v-enter-active和v-enter-to都同时被加载，作为动画的样式，被加进去。此时可以看到的是，文字逐步变绿显示出来。
3.v-enter-to被加载，显示为绿色。由于瞬间被移除，所以文字又恢复成了黑色。
以上就是我对过渡效果的一个理解。理解有偏差的地方，还请大家指正纠错，谢谢。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
