小球動(dòng)畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../util/vue-2.4.0.js"></script>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="test">
<input type="button" @click="flag=!flag" value="button">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm1 = new Vue({
el:"#test",
data:{
flag:false
},
methods:{
//注意： 動(dòng)畫鉤子函數(shù)的第一個(gè)參數(shù)：el冗锁，表示 要執(zhí)行動(dòng)畫的那個(gè)DOM元素妇多，是個(gè)原生的 JS DOM對(duì)象
beforeEnter:function (el) {
el.style.transform = "translate(0,0)"
},
enter:function (el,done) {
el.offsetWidth; // 獲取元素的寬度蚊伞，這里沒什么實(shí)際作用永品，不加不出效果
// enter 表示動(dòng)畫 開始之后的樣式狰腌，這里悦施，可以設(shè)置小球完成動(dòng)畫之后的伤柄，結(jié)束狀態(tài)
el.style.transform="translate(150px,450px)";
// 動(dòng)畫執(zhí)行的方式
el.style.transition="all 1s ease";
// 這里的 done绊困， 起始就是 afterEnter 這個(gè)函數(shù)，也就是說：done 是 afterEnter 函數(shù)的引用
done()
},
afterEnter(el){
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
