Vuejs第七篇之Vuejs过渡动画案例全面解析

<div class="box" v-if="box_1" transition="mytran">1</div>

<div v-for="i in items" class="box" transition="mytran">{{i}}</div>

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 

/*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/ 
.mytran-transition { 
transition: all 0.3s ease; 
background-color: greenyellow; 
} 

/* .mytran-enter 定义进入的开始状态 */ 
/* .mytran-leave 定义离开的结束状态 */ 
.mytran-enter, .mytran-leave { 
height: 0; 
width: 0; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box" v-if="box_1" transition="mytran">1</div> 
<div class="box" v-if="box_2" transition="mytran">2</div> 
<div class="box" v-if="box_3" transition="mytran">3</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box_1: true, 
box_2: true, 
box_3: true 
}, 
methods: { 
change: function () { 
for (var i = 1; i < 4; i++) { 
this['box_' + i] = Math.random() > 0.5 ? true : false; 
} 
} 
} 
}) 
setInterval(vm.change, 300); 
</script>

Vue.transition('mytran', { 
beforeEnter: function (el) { //进入之前 
console.log("进入动画开始时间:" + new Date().getTime()); 
}, 
enter: function (el) { 
el.textContent = new Date(); 
}, 
afterEnter: function (el) { 
console.log("进入结束时间:" + new Date().getTime()); 
}, 
beforeLeave: function (el) { 
console.log("离开动画开始时间:" + new Date().getTime()); 
}, 
leave: function (el) { 
$(el).text("离开中..." + new Date()); 
}, 
afterLeave: function (el) { 
console.log("离开结束时间:" + new Date().getTime()); 
} 
})

<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="bounce">1</div> 
</div> 
<script> 
Vue.transition("bounce", { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>

@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
}

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 
@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="fat">1</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>