您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue框架如何制作購物車小球動(dòng)畫效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue框架如何制作購物車小球動(dòng)畫效果”這篇文章吧。
最近在學(xué)習(xí)前端制作了一個(gè)購物車小球的動(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定位確保不影響頁面的其他元素
.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)畫效果(這里就不多說了)
如果起始位置和終點(diǎn)位置都使用px固定死的話對于不同的分辨率的設(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)的位置來實(shí)現(xiàn)動(dòng)畫效果(優(yōu)勢可以適配不同分辨率的設(shè)備)看到現(xiàn)在似乎整個(gè)動(dòng)畫效果已經(jīng)完成了。
不過我在測試使用的時(shí)候發(fā)現(xiàn)一個(gè)問題
當(dāng)我點(diǎn)擊按鈕觸發(fā)動(dòng)畫的時(shí)候往下拉滾動(dòng)條發(fā)現(xiàn)動(dòng)畫終點(diǎn)的位置并不是期望的那樣到達(dá)購物車的位置原因是我在給小球設(shè)置樣式的時(shí)候給display設(shè)置的absolute絕對定位 只會(huì)計(jì)算出一個(gè)頁面中的絕對的位置,無法跟著滾動(dòng)條來動(dòng)。后來又想到可以使用fixed布局相對這屏幕來運(yùn)動(dòng)不受頁面滾動(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是頁面中數(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)轫撁娴臐L動(dòng)而無法準(zhǔn)確的定位而且還能適配不同分辨率的設(shè)備。
以上是“vue框架如何制作購物車小球動(dòng)畫效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。