這篇文章主要為大家展示了“vue框架如何制作購(gòu)物車小球動(dòng)畫效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue框架如何制作購(gòu)物車小球動(dòng)畫效果”這篇文章吧。

站在用戶的角度思考問題，與客戶深入溝通，找到鄂托克網(wǎng)站設(shè)計(jì)與鄂托克網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋鄂托克地區(qū)。

最近在學(xué)習(xí)前端制作了一個(gè)購(gòu)物車小球的動(dòng)畫效果

直接上圖看看效果

下面介紹一下制作這個(gè)動(dòng)畫的詳細(xì)過程：

1.因?yàn)槭褂胿ue鎖業(yè)需要使用transition標(biāo)簽包裹 并指定動(dòng)畫三個(gè)動(dòng)畫生命周期函數(shù)

<transition 
 		@before-enter="beforeEnter"
 		@enter="enter"
 		@after-enter="afterEnter">
 		<div class="ball" v-if="Ballflag" ref="ball"></div> //Ballflag默認(rèn)指定為false不顯示
 	</transition>

樣式設(shè)置成一個(gè)紅色的小球采用absolute定位確保不影響頁(yè)面的其他元素

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		top: 413px;
		left: 80px;
		z-index: 99;
}

然后設(shè)置按鈕 Ballflag = !Ballflag 取非 觸發(fā)動(dòng)畫效果（這里就不多說(shuō)了）

如果起始位置和終點(diǎn)位置都使用px固定死的話對(duì)于不同的分辨率的設(shè)備效果都有所不同所以為避免這一情況我采用了動(dòng)態(tài)計(jì)算出 起始位置和終點(diǎn)位置下面是具體的動(dòng)畫的代碼

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		top: 413px;
		left: 80px;
		z-index: 99;
}

通過動(dòng)態(tài)的計(jì)算出起點(diǎn)位置和終點(diǎn)的位置來(lái)實(shí)現(xiàn)動(dòng)畫效果（優(yōu)勢(shì)可以適配不同分辨率的設(shè)備）看到現(xiàn)在似乎整個(gè)動(dòng)畫效果已經(jīng)完成了。

不過我在測(cè)試使用的時(shí)候發(fā)現(xiàn)一個(gè)問題

當(dāng)我點(diǎn)擊按鈕觸發(fā)動(dòng)畫的時(shí)候往下拉滾動(dòng)條發(fā)現(xiàn)動(dòng)畫終點(diǎn)的位置并不是期望的那樣到達(dá)購(gòu)物車的位置原因是我在給小球設(shè)置樣式的時(shí)候給display設(shè)置的absolute絕對(duì)定位 只會(huì)計(jì)算出一個(gè)頁(yè)面中的絕對(duì)的位置，無(wú)法跟著滾動(dòng)條來(lái)動(dòng)。后來(lái)又想到可以使用fixed布局相對(duì)這屏幕來(lái)運(yùn)動(dòng)不受頁(yè)面滾動(dòng)的影響所以實(shí)現(xiàn)的代碼如下樣式

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: fixed;
		z-index: 99;
		top: 413px;
		left: 80px;

	}

****注意這里的boxPosition是頁(yè)面中數(shù)量1的位置 即定位小球的位置

beforeEnter(el){
			
			var boxPosition = this.$refs.boxPosition.getBoundingClientRect();
			// console.log(boxPosition)
			// 獲取目標(biāo)的起始位置 
			var dist = boxPosition.y -413;
			el.style.transform = "translate(0,"+dist+"px)";
		},
		enter(el,done){
			el.offsetWidth;
			
			var boxPosition = this.$refs.boxPosition.getBoundingClientRect();
			var badgePosition = document.getElementById("badge").getBoundingClientRect();

			//目標(biāo)的起始位置
			var dist = boxPosition.y -413; 
			
			// 這里因?yàn)槭鞘褂胋oxPosition的位置不是小球的位置所以-10調(diào)整一下誤差
			var xDist = badgePosition.left - boxPosition.left -10; 

			//這里要加上起始的定位
			var yDist = badgePosition.top - boxPosition.top + dist;
			
			el.style.transform = "translate("+xDist+"px, "+yDist+"px)";
			el.style.transition = "all 1s ease";
			done();
		},
		afterEnter(el){
			this.Ballflag = !this.Ballflag;
		},

這里就已經(jīng)完成了小球的動(dòng)畫效果了

這樣的動(dòng)畫不會(huì)因?yàn)轫?yè)面的滾動(dòng)而無(wú)法準(zhǔn)確的定位而且還能適配不同分辨率的設(shè)備。

以上是“vue框架如何制作購(gòu)物車小球動(dòng)畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：vue框架如何制作購(gòu)物車小球動(dòng)畫效果-創(chuàng)新互聯(lián)
文章起源：http://chinadenli.net/article42/dpphec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)建站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)