溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在transition中還可以通過設置javascript鉤子函數，實現自定義動畫效果。
以實現擊球效果為例：
擊球
代碼解析：
<!-- 定義js的鉤子函數 --> <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 表示要執行動畫的那個DOM元素, 是原生的 js DOM 對象
beforeEnter(el) {
// 設置動畫開始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新動畫效果
el.offsetWidth;
// 動畫完成后的樣式
el.style.transform = "translate(550px, 350px)";
// 動畫的持續時間
el.style.transition = "all 3s ease";
// done 其實是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 動畫完成之后調用
this.flag = !this.flag
}
}
})
完整代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <style> .container { margin-top: 2%; } img.ball { margin-left: 3%; } </style> <body> <div class="container"> <div id="app"> <button class="btn btn-danger" @click="flag=!flag">擊球</button> <!-- 定義js的鉤子函數 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <img v-show="flag" class="ball" :src="ball" alt="" width="30"> </transition> </div> </div> <script> 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 表示要執行動畫的那個DOM元素, 是原生的 js DOM 對象 beforeEnter(el) { // 設置動畫開始之前的初始位置 el.style.transform = "translate(0, 0)" }, enter(el, done) { // 刷新動畫效果 el.offsetWidth; // 動畫完成后的樣式 el.style.transform = "translate(550px, 350px)"; // 動畫的持續時間 el.style.transition = "all 3s ease"; // done 其實是 afterEnter() 的引用 done(); }, afterEnter(el) { // 動畫完成之后調用 this.flag = !this.flag } } }) </script> </body> </html>
最終效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
