Vue中CSS动画原理
<body>
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
这个代码的网页显示如下：
图片.png
点击切换按钮后，显示如下：
图片.png
这都很正常，都是之前学过的内容。
现在有个需求：当点击“切换”后，hello world的显示和隐藏呈现出渐变式的变化。
如果要有渐变式的动画效果，必须要加transition标签。可以给标签起名字，比如叫“fade”。
当元素被transition标签包裹后，Vue会自动分析出元素的动画央视和动画流程。
图片.png
上图是整个动画的流程。当在动画即将开始的时候，Vue会在标签div上增加两个class：“fade-enter”、“fade-enter-active”，当动画第一帧执行结束后，transition会分析出这个是一个动画组，Vue会在动画运行到第二帧的时候，做两件事：1、将之前添加的“fade-enter”给去除；2、再增加一个class：“fade-enter-to”。等动画运行到最后的时候，Vue会将“fade-enter-active”和“fade-enter-to”都给去除。
修改后的代码如下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition:opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition name='fade'>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
因为涉及到样式，所以head标签的内容也涉及进来。
可以看到在head标签内，增加了style标签，标签内备上了“.fade-enter”，“.fade-enter-active”内容。
opacity是不透明度的意思，其默认值是1；
当动画开始执行的时候，到第一帧时，Vue将这两个class都添加到标签transition内的div标签中；等到第二帧的时候‘fade-enter’开始销毁，这时，opacity将由指定的0变成默认值1,但这个过程并不是一下就完成的，因为我指定了完成所需要的时间，也就是“fade-enter-active”中的3s。这样就完成了整个出现的过程。
这是从隐藏状态变为显示状态，那么同理也会有从显示状态变成隐藏状态
图片.png
上图是整个变成隐藏状态的执行过程。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition:opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition:opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition name='fade'>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
现增加的是从显示到隐藏的状态，那么我就要知道隐藏的状态的不透明度是多少，也要知道从显示到隐藏状态用的时间，这就是增加了两个class：“fade-leave-to”、“fade-leave-active”的原因。
因为不透明度都是0，渐变的时间都是3s，当然也可以给style标签做一个整理：
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active
{
transition:opacity 3s;
}
</style>
这里面，style标签内都是以fade开头的，这是因为transition标签，我起的名字就是fade；如果transition不起名字的话，那么style标签内将是以v开头，比如v-enter，v-enter-active。
例子中内容的现实与否是用v-if，当然也可以用v-show，动画效果一样。
这种动画效果，Vue把它叫做CSS动画效果，也把它叫做过渡的动画效果
