我们通过一个例子来理解,想实现的效果是点击动画按钮,文字“hello world”由显示到逐渐消失,再点击,逐渐显示。一般来说想要哪个元素有动画效果,就要在外面包裹一层transition标签,如下:
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">动画</button>
</div>
本质上来说当一个元素被transition包括后,vue会自动的分析元素的css样式,然后构建一个动画的流程:
- 标签显示:
在动画即将被执行的一瞬间,vue会在内部的div元素上增加两个类名:fade-enter以及fade-enter-active,当动画第一帧执行结束执行第二帧的时候,vue会去掉fade-enter,加上fade-enter-active这个class样式;动画继续执行,执行到最后的时候,vue会去掉fade-enter-active和fade-enter-to这两个类。
- 标签隐藏:
和显示过程相似如图:
所以我们就可以根据以上的过程来设置样式:
<style>
.fade-enter,
.fade-leave-to{ /*显示和隐藏的时候*/
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition:opacity 2s;
}
</style>
完整的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中css动画原理</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
.fade-enter,
.fade-leave-to{ /*显示和隐藏的时候*/
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition:opacity 2s;
}
</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>
</html>
– 需要注意的是,当transition没有设置name的时候,我们要这样定义动画样式:
<style>
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">动画</button>
</div>