<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
}
/* v-if="true" 进入动画之前 入场的一个初始化 */
.slide-enter{
opacity: 0;
}
/* 进入的一个过渡 */
.slide-enter-active{
transition: opacity 3s linear;
}
/* 进入到什么状态 */
.fade-enter-to {
opacity: 1;
}
/* v-if="false" 离开动画之前 出场的一个初始化 */
.slide-leave{
opacity: 1;
}
/*定义离开的过渡*/
.slide-leave-active{
transition: opacity 2s linear;
}
/* 离开到什么状态 */
.slide-leave-to{
opacity: 0;
}
</style>
<script>
new Vue({
el:'#app',
data:{
show:true
},
template:`
<div class='app'>
<transition name='slide'>
<div class='box' v-if='show'>
</div>
</transition>
<button @click="show=!show">开关</button>
</div>
`,
})
</script>
动画钩子函数
<style>
.box{
width: 300px;
height: 300px;
background: red;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeIn {
animation: fadeIn 5s linear;
}
.fadeOut {
animation: fadeOut 5s linear;
}
.fade {
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
</style>
<script>
new Vue({
el: '#ap',
template: `
<div class="app">
<transition
enter-active-class="fade fadeInLeft"
leave-active-class="fade fadeOutLeft"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div class="box" v-if="show">
</div>
</transition>
<button @click="show =!show">开关</button>
</div>
`,
methods: {
beforeEnter(){
// 进入之前
console.log('动画进入之前')
},
enter(){
console.log('动画进入时')
},
afterEnter(){
console.log('动画进入后')
},
enterCancelled(){
// 在动画还未完成时 取消动画该钩子就会运行
console.log('进入动画取消')
},
beforeLeave() {
console.log('动画离开前')
},
leave() {
console.log('动画离开时')
},
afterLeave() {
console.log('离开后')
},
leaveCancelled(){
console.log('离开动画取消')
},
},
data: {
show: true
}
})
</script>