vue框架制作購物車小球動畫效果實(shí)例代碼

更新時(shí)間：2019年09月26日 10:37:31 作者：weixin_44586318

最近在學(xué)習(xí)前端制作了一個(gè)購物車小球的動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

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

直接上圖看看效果

在這里插入圖片描述

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

1.因?yàn)槭褂胿ue鎖業(yè)需要使用transition標(biāo)簽包裹并指定動畫三個(gè)動畫生命周期函數(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定位確保不影響頁面的其他元素

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

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

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

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

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

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

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

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

	}

****注意這里的boxPosition是頁面中數(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)完成了小球的動畫效果了

這樣的動畫不會因?yàn)轫撁娴臐L動而無法準(zhǔn)確的定位而且還能適配不同分辨率的設(shè)備。

總結(jié)

以上所述是小編給大家介紹的vue框架制作購物車小球動畫效果實(shí)例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: