参考资料
部分案例,更多参考前往 vueJS中文网-动画
1. 动画-透明
<!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">
<title>Document</title>
<script src="../lib/vue2.6.11.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 2s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">隐藏/显示</button>
<transition>
<label v-if="show">即将消失的落鲸</label>
</transition>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
show:true
}
});
</script>
</body>
</html>
2. 渲染动画
<!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">
<title>Document</title>
<link rel="stylesheet" typeof="text/css" href="../lib/animate.css">
<script src="../lib/vue2.6.11.js"></script>
<style type="text/css">
.custom-appear-class{
font-size: 80px;
}
.custom-appear-to-class,
.custom-appear-active-class{
transition: font-size 2s;
}
</style>
</head>
<body>
<div id="app">
<transition appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class"
>
<label v-if="show">即将消失的落鲸</label>
</transition>
</div>
<script>
let vm = new Vue({
el:"#app"
});
</script>
</body>
</html>
3. 自带in-out out-in
<!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">
<title>Document</title>
<link rel="stylesheet" typeof="text/css" href="../lib/animate.css">
<script src="../lib/vue2.6.11.js"></script>
<style type="text/css">
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 2s ease;
}
</style>
</head>
<body>
<div id="app">
<transition-group name="fade" mode="in-out"
>
<button v-if="docState === 'saved'" key="saved" @click="saved()">
Edit
</button>
<button v-if="docState === 'edited'" key="edited" @click="edited()">
Save
</button>
</transition-group>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
docState:'saved'
},
methods:{
saved:function () {
this.docState='edited';
},
edited:function () {
this.docState='saved';
}
}
});
</script>
</body>
</html>