vue動(dòng)畫—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫操作
注意：
1.起始位置設(shè)置了一個(gè)（0，0）在第一遍執(zhí)行時(shí)，是沒(méi)有作用的。在一次入場(chǎng)動(dòng)畫執(zhí)行完成之后，在最終位置停下來(lái)并不在起始位置，通過(guò)這里的位置的設(shè)置可以將入場(chǎng)動(dòng)畫結(jié)束時(shí)的位置調(diào)到這里
2.理解enter()函數(shù)的el的指代對(duì)象和done()指代的回調(diào)函數(shù)
3.理解this.show = !this.show，這句話有兩個(gè)作用。一是：控制顯示和隱藏，二是：false —> true為半場(chǎng)動(dòng)畫，true—>false又是為另半場(chǎng)動(dòng)畫。這樣就能完成一直循環(huán)執(zhí)行半場(chǎng)動(dòng)畫的效果了。
HTML代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.intensediesel.com/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='跳進(jìn)籃子里' 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)' //表示動(dòng)畫入場(chǎng)之前，坐標(biāo)表示位置是在起始位置不動(dòng) //在一次入場(chǎng)動(dòng)畫執(zhí)行完成之后，在最終位置停下來(lái)并不在起始位置，通過(guò)這里的位置的設(shè)置可以將入場(chǎng)動(dòng)畫結(jié)束時(shí)的位置調(diào)到這里 }, enter(el,done){ el.offsetTop; //必須要寫一下offsetTop，offsetWeith等四種中的其中一種，強(qiáng)制刷新動(dòng)畫 el.style.transform = 'translate(200px,450px)'; el.style.transition = 'all 2s ease'; done() //done是enter方法的原生的引用函數(shù)名，這里表示是回調(diào)函數(shù)，也就是接下來(lái)執(zhí)行的操作aEnter（），消滅延遲效果。 }, aEnter(el){ this.show = !this.show; } } //這里的el代表，將要執(zhí)行半場(chǎng)動(dòng)畫的對(duì)象，是第一個(gè)原生的參數(shù)，跟自定義指令的el作用是一樣的 }); </script></body></html>
效果：
補(bǔ)充知識(shí)：vue動(dòng)畫只有離場(chǎng)動(dòng)畫，進(jìn)場(chǎng)動(dòng)畫不生效
存在問(wèn)題的圖：（只有離場(chǎng)動(dòng)畫，進(jìn)場(chǎng)動(dòng)畫不生效）
解決之后效果圖：
解決辦法：
在transition標(biāo)簽中加入appear屬性
<template> <transition mode='out-in' appear> <div class='singer-detail'> </div> </transition></template>
以上這篇vue動(dòng)畫—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP常用日期格式化函數(shù) FormatDate()2. 解析原生JS getComputedStyle3. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）4. jsp實(shí)現(xiàn)登錄驗(yàn)證的過(guò)濾器5. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)6. css代碼優(yōu)化的12個(gè)技巧7. jsp cookie+session實(shí)現(xiàn)簡(jiǎn)易自動(dòng)登錄8. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法9. jsp EL表達(dá)式詳解10. 輕松學(xué)習(xí)XML教程
網(wǎng)公網(wǎng)安備