文章目录
文章参考
问题描述
今天在学习Vue动画的时候，发现对组件的属性不熟悉，以下作为复习的内容
概念解释
- 动画状态分为“开始状态” ---- “过渡状态” ----“结束状态”
- 显示： enter ------ enter-active ------- enter-to
- 隐藏： leave ------- leave-active ------ leave-to
案例
自定义动画
<!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="../js/vue.js"></script>
</head>
<style>
.box{
height: 100px;
width: 100px;
background-color: rebeccapurple;
display: inline-block;
}
.fade-enter{
opacity: 0;
background-color: green;
transform: rotate(0deg);
transform: scale(2, 4)
}
.fade-enter-active{
transition: all 3s;
}
.fade-enter-to{
opacity: 1;
background-color: red;
transform: rotate(360deg);
}
.fade-leave{
opacity: 1;
}
.fade-leave-active{
transition: all 3s;
}
.fade-leave-to{
opacity: 0;
transform: translate(300px, 200px);
}
</style>
<body>
<div id="app">
<transition name='fade'>
<div class="box" v-if='isShow'></div>
</transition>
<div>
<button @click='toggleAction'>切换</button>
</div>
</div>
</body>
<script>
/**
*/
var app = new Vue({
el: '#app',
data: function () {
return {
isShow: true
}
},
methods: {
toggleAction: function () {
this.isShow = !this.isShow;
}
},
})
</script>
</html>
-
<transition name='fade'>中的name值是作为样式的名字 - 触发动画尽量用
v-if - 因为name=‘fade’，所以进入的样式是
fade-enter、fade-enter-active、fade-enter-to- fade-enter 表示显示的初始样式
- fade-enter-to 表示的是显示最后的样式
- fade-enter-active 表示的是从fade-enter到fade-enter-to样式过渡的时间
- 因为name=‘fade’，所以进入的样式是
fade-leave、fade-leave-active、fade-leave-to- fade-leave 表示删除的初始样式
- fade-leave-to 表示的是删除最后的样式
- fade-leave-active 表示的是从fade-leave 到fade-leave-to样式过渡的时间
引用animate.css动画
<!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" href="../js/animate.css">
<script src="../js/vue.js"></script>
</head>
<style>
.box{
height: 100px;
width: 100px;
background-color: rebeccapurple;
display: inline-block;
}
</style>
<body>
<div id="app">
<transition
leave-active-class='flash animated'
enter-active-class='rollIn animated'
>
<div class="box" v-if='isShow'></div>
</transition>
<div>
<button @click='toggleAction'>切换</button>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
isShow: true
}
},
methods: {
toggleAction: function () {
this.isShow = !this.isShow;
}
},
})
</script>
</html>
动画钩子函数
<!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" href="../js/animate.css">
<script src="../js/vue.js"></script>
</head>
<style>
.box{
height: 100px;
width: 100px;
background-color: rebeccapurple;
display: inline-block;
}
</style>
<body>
<div id="app">
<transition
leave-active-class='flash animated'
enter-active-class='rollIn animated'
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<div class="box" v-if='isShow'></div>
</transition>
<div>
<button @click='toggleAction'>切换</button>
</div>
</div>
</body>
<script>
/**
*/
var app = new Vue({
el: '#app',
data: function () {
return {
isShow: true
}
},
methods: {
toggleAction: function () {
this.isShow = !this.isShow;
},
beforeEnter: function () {
console.log('beforeEnter')
},
enter: function () {
console.log('enter')
},
afterEnter: function () {
console.log('afterEnter')
},
enterCancelled: function () {
console.log('enterCancelled')
},
beforeLeave: function () {
console.log('beforeLeave')
},
leave: function () {
console.log('leave')
},
afterLeave: function () {
console.log('afterLeave')
},
leaveCancelled: function () {
console.log('leaveCancelled')
}
},
})
</script>
</html>