在transition中還可以通過設(shè)置javascript鉤子函數(shù)，實(shí)現(xiàn)自定義動(dòng)畫效果。
以實(shí)現(xiàn)擊球效果為例：
擊球
代碼解析：
<!-- 定義js的鉤子函數(shù) -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<img v-show="flag" class="ball" :src="ball" alt="" width="30">
</transition>
let vm = new Vue({
el: "#app",
data: {
flag: false,
ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
},
methods: {
// el 表示要執(zhí)行動(dòng)畫的那個(gè)DOM元素, 是原生的 js DOM 對(duì)象
beforeEnter(el) {
// 設(shè)置動(dòng)畫開始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新動(dòng)畫效果
el.offsetWidth;
// 動(dòng)畫完成后的樣式
el.style.transform = "translate(550px, 350px)";
// 動(dòng)畫的持續(xù)時(shí)間
el.style.transition = "all 3s ease";
// done 其實(shí)是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 動(dòng)畫完成之后調(diào)用
this.flag = !this.flag
}
}
})
最終效果：
擊球.gif
