vue動畫—通過鉤子函數實現半場動畫操作
注意：
1.起始位置設置了一個（0，0）在第一遍執行時，是沒有作用的。在一次入場動畫執行完成之后，在最終位置停下來并不在起始位置，通過這里的位置的設置可以將入場動畫結束時的位置調到這里
2.理解enter()函數的el的指代對象和done()指代的回調函數
3.理解this.show = !this.show，這句話有兩個作用。一是：控制顯示和隱藏，二是：false —> true為半場動畫，true—>false又是為另半場動畫。這樣就能完成一直循環執行半場動畫的效果了。
HTML代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://m.propowerdrill.cn/lib/vue.js'></script></head><style> .ball{ margin: 50px 50px; width: 15px; height: 15px; border-radius: 50px; background-color: brown; }</style><body> <div id='app'> <input type='button' value='跳進籃子里' v-on:click='show=!show'> <transition v-on:before-enter='bEnter' v-on:enter='enter' v-on:after-enter='aEnter'> <div v-show='show'></div> </transition> </div> <script> var vm = new Vue({ el:’#app’, data:{ show:false }, methods:{ bEnter(el){ el.style.transform = 'translate(0,0)' //表示動畫入場之前，坐標表示位置是在起始位置不動 //在一次入場動畫執行完成之后，在最終位置停下來并不在起始位置，通過這里的位置的設置可以將入場動畫結束時的位置調到這里 }, enter(el,done){ el.offsetTop; //必須要寫一下offsetTop，offsetWeith等四種中的其中一種，強制刷新動畫 el.style.transform = 'translate(200px,450px)'; el.style.transition = 'all 2s ease'; done() //done是enter方法的原生的引用函數名，這里表示是回調函數，也就是接下來執行的操作aEnter（），消滅延遲效果。 }, aEnter(el){ this.show = !this.show; } } //這里的el代表，將要執行半場動畫的對象，是第一個原生的參數，跟自定義指令的el作用是一樣的 }); </script></body></html>
效果：
補充知識：vue動畫只有離場動畫，進場動畫不生效
存在問題的圖：（只有離場動畫，進場動畫不生效）
解決之后效果圖：
解決辦法：
在transition標簽中加入appear屬性
<template> <transition mode='out-in' appear> <div class='singer-detail'> </div> </transition></template>
以上這篇vue動畫—通過鉤子函數實現半場動畫操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
1. python基于openpyxl生成excel文件2. Python基于jieba, wordcloud庫生成中文詞云3. JS中6個對象數組去重的方法4. python利用蒙版摳圖(使用PIL.Image和cv2)輸出透明背景圖5. win10下opencv-python特定版本手動安裝與pip自動安裝教程6. 淺談JavaScript的對象類型之function7. Python web如何在IIS發布應用過程解析8. 每日六道java新手入門面試題,通往自由的道路--多線程9. Python Sqlalchemy如何實現select for update10. Java下變量大小寫駝峰、大小寫下劃線、大小寫連線轉換
網公網安備