vue怎么實現購物車小球動畫效果

這篇文章主要介紹“vue怎么實現購物車小球動畫效果”，在日常操作中，相信很多人在vue怎么實現購物車小球動畫效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現購物車小球動畫效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.因為使用vue鎖業需要使用transition標簽包裹 并指定動畫三個動畫生命周期函數

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

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

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

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

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

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

通過動態的計算出起點位置和終點的位置來實現動畫效果（優勢可以適配不同分辨率的設備）看到現在似乎整個動畫效果已經完成了。

不過我在測試使用的時候發現一個問題

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

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

	}

注意這里的boxPosition是頁面中數量1的位置 即定位小球的位置

beforeEnter(el){
			
			var boxPosition = this.$refs.boxPosition.getBoundingClientRect();
			// console.log(boxPosition)
			// 獲取目標的起始位置 
			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();

			//目標的起始位置
			var dist = boxPosition.y -413; 
			
			// 這里因為是使用boxPosition的位置不是小球的位置所以-10調整一下誤差
			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;
		},

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

到此，關于“vue怎么實現購物車小球動畫效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！