Vue中可以使用CSS動(dòng)畫,我們還可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)動(dòng)畫。我們?cè)跇?biāo)簽中定義了一些動(dòng)畫鉤子函數(shù),可以來(lái)實(shí)現(xiàn)動(dòng)畫。
鉤子函數(shù)可以結(jié)合CSS過(guò)渡(transitions)、動(dòng)畫(animations)使用,還可以單獨(dú)使用,示例代碼如下:
在以上代碼中,入場(chǎng)鉤子函數(shù)分別是beforeEnter(入場(chǎng)前)、enter(入場(chǎng))、afterEnter(入場(chǎng)后)和enterCancelled(取消入場(chǎng)),出場(chǎng)鉤子函數(shù)分別是beforeLeave(出場(chǎng)前)、leave(出場(chǎng))、afterLeave(出場(chǎng)后)和leaveCancelled(取消出場(chǎng))。第10行行為僅使用JavaScript過(guò)渡的元素添加v-bind:css=”false”,表示給CSS綁定了false值,Vue會(huì)跳過(guò)CSS的檢測(cè),避免過(guò)渡過(guò)程中受到CSS的影響。
下面我們演示如何在methods中編寫鉤子函數(shù),示例代碼如下:
methods:?{????//?beforeEnter?入場(chǎng)鉤子函數(shù)????//?動(dòng)畫入場(chǎng)之前,此時(shí)動(dòng)畫尚未開始,設(shè)置元素開始動(dòng)畫之前的起始樣式????beforeEnter(el)?{},????//?enter用于設(shè)置動(dòng)畫開始之后的樣式????enter(el,?done)?{????????//?...????????done()????},????//?在入場(chǎng)動(dòng)畫完成之后會(huì)調(diào)用????afterEnter(el)?{},????enterCancelled(el)?{},????//?出場(chǎng)鉤子函數(shù)????beforeLeave(el)?{},????leave(el,?done)?{????????//?...????????done()????},????afterLeave(el)?{},????leaveCancelled(el)?{},}
上述代碼中,所有的鉤子函數(shù)都會(huì)傳入el參數(shù)(el為element的縮與),el指的是動(dòng)畫包裹的標(biāo)簽。其中,enter和 leave動(dòng)畫鉤子函數(shù),還會(huì)傳入done作為參數(shù),用來(lái)告知 Vue動(dòng)畫結(jié)束。在enter和 leave中,當(dāng)與CSS結(jié)合使用時(shí),回調(diào)函數(shù)done是可選的,而當(dāng)使用JavaScript過(guò)渡的時(shí)候,回調(diào)函數(shù)done是必須的,否則過(guò)渡會(huì)立即完成。
enterCancelled和 leaveCancelled動(dòng)畫鉤子函數(shù)只應(yīng)用于v-show中。
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號(hào) ISP經(jīng)營(yíng)許可證:豫B-20160281