摘要:第個問題購物車小球做拋物線運動。首先,落點都在購物車,小球則是隨機的。其次,拋物線運動,只有在這段期間有,在期間是沒有的,因此,需要用提供的鉤子函數(shù)。獲取號位置小球是子組件。直接使用事件總線。
備注:此項目模仿 餓了嗎。我用的是最新的Vue, 視頻上的一些寫法已經(jīng)被廢棄了。
布局代碼
css代碼(使用stylus寫法)
.ball-container .ball position fixed left 32px bottom 22px z-index 200 transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41) .inner width 16px height 16px border-radius 50% background-color rgb(0,160,220) transition all 0.4s linear
js代碼
data() { return { balls : [ { show: false }, { show: false }, { show: false }, { show: false }, { show: false } ], dropBalls: [] }; }, methods: { drop(el) { for(let i = 0; i < this.balls.length; i++) { let ball = this.balls[i]; if(!ball.show) { ball.show = true; ball.el = el; this.dropBalls.push(ball); return ; } } } beforeDrop(el) { let count = this.balls.length; while (count--) { let ball = this.balls[count]; if(ball.show) { let rect = ball.el.getBoundingClientRect(); let x = rect.left - 32; let y = -(window.innerHeight - rect.top - 22); el.style.webkitTransform = `translate3d(0,${y}px,0)`; el.style.transform = `translate3d(0,${y}px,0)`; let inner = el.getElementsByClassName("inner-hook")[0]; inner.style.webkitTransform = `translate3d(${x}px,0,0)`; inner.style.transform = `translate3d(${x}px,0,0)`; } } }, dropping(el) { /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; this.$nextTick(() => { el.style.webkitTransform = "translate3d(0,0,0)"; el.style.transform = "translate3d(0,0,0)"; let inner = el.getElementsByClassName("inner-hook")[0]; inner.style.webkitTransform = "translate3d(0,0,0)"; inner.style.transform = "translate3d(0,0,0)"; }); }, afterDrop(el){ let ball = this.dropBalls.shift(); if(ball) { ball.show = false; el.style.display = "none"; } } }
getBoundingClientRect()。方法請閱讀這篇文章
https://www.cnblogs.com/limei...
說明:
goods 是一個組件,里面包含menu(div) , foods(div), shopcart(購物車組件)。其中foods 包含cartcontrol(即小球組件)
組件之間的通信:
說明:菜單和商品
第1個問題:小球,需要獲取所點擊的商品的數(shù)量。
利用Vue的props,將foods值傳遞給cartcontrol。但是這樣有個問題。即子組件更新,無法同步回父組件。且,在子組件中,對food注冊了一個count屬性,此屬性也無法同步回父組件(goods)。
解決方法:
導入全局的Vue。
利用Vue.set(target,key,value); 對 target注冊count;
第2個問題:小球點擊,將所點擊過的商品數(shù)目傳遞給 shopcart。
在goods的 computed:{} 定義一個方法,將該方法以props的方式,傳遞給shopcart。
因為,shopcart,對傳遞過去的數(shù)據(jù)僅數(shù)據(jù)運算(不會改變)。因此不用同步會父組件。
第3個問題:購物車小球做拋物線運動。
對于購物車小球做拋物線運動。首先,落點都在購物車,小球則是隨機的。要做拋物線運動,就要獲取,所點擊的 + 號的x,y位置。其次,拋物線運動,只有在enter--> enter-to這段期間有,在leave--> leave-to 期間是沒有的,因此,需要用Vue提供的鉤子函數(shù)。
獲取 + 號x,y 位置:
小球(cartcontrol)是子組件。需要把數(shù)據(jù)傳遞給 goods(父組件)。可以使用Vuex,或者直接使用事件總線。對于餓了嗎demo。直接使用事件總線。
創(chuàng)建一個 空的Vue。在 cartcontrol 中 ,通過 Bus.$emit(key, ... arg); 注冊一個監(jiān)聽,然后再父組件 通過Bus.$on(key, function(... arg));監(jiān)聽此方法。將所操作的 dom 對象傳遞過去即可
Vue提供的鉤子
這里要說明一點,Vue在他的官網(wǎng),對于只有過度的js,done是必須的,當我加上done的時候,after-enter方法無法被執(zhí)行。
還有1個問題,Vue官網(wǎng)推薦,只有過度效果,在做過度動畫的元素上加上v-bind:class="false"。之前沒加,出現(xiàn)了,小球只能在第1次點擊的地方做過度效果。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/107125.html
摘要:前言這是我第一個基于的項目作品,目的很簡單,學以致用,將之前的前端知識積累加上目前流行的前端框架,以項目的形式展現(xiàn)出來。即將屬性和請求返回數(shù)據(jù)對象合并到空對象,然后賦值給這里加上即提供了一種可擴展的機制,倘若原來的屬性中有預定義的其他屬性。 前言 這是我第一個基于 Vue 的項目作品,目的很簡單,學以致用,將之前的前端知識積累加上目前流行的前端框架,以項目的形式展現(xiàn)出來。 源代碼:ht...
摘要:陳家賓在做小程序的項目中,需要在添加購物車的時候,增加拋物線小球動畫。 author: 陳家賓 email: 617822642@qq.com date: 2018/2/24 在做小程序的項目中,需要在添加購物車的時候,增加拋物線小球動畫。 先給大家看下效果圖(其實已經(jīng)是實現(xiàn)后的效果了,順便給自己公司打廣告了哈哈) showImg(https://segmentfault.com/im...
摘要:上圖即為歸零后的坐標系,對稱軸直線為在拋物線方程中,值得正負代表著拋物線的開口方向,那么值的絕對值也和拋物線的開口大小有著反比例的關(guān)系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理 很簡單的一個小特效,接下來來說一下他的原理。 顯而易見,這小東西肯定和拋物...
摘要:上圖即為歸零后的坐標系,對稱軸直線為在拋物線方程中,值得正負代表著拋物線的開口方向,那么值的絕對值也和拋物線的開口大小有著反比例的關(guān)系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理 很簡單的一個小特效,接下來來說一下他的原理。 顯而易見,這小東西肯定和拋物...
閱讀 3267·2021-11-24 09:38
閱讀 2148·2021-11-23 09:51
閱讀 1738·2021-10-13 09:39
閱讀 2610·2021-09-23 11:53
閱讀 1394·2021-09-02 15:40
閱讀 3648·2019-08-30 15:54
閱讀 1121·2019-08-30 13:04
閱讀 2552·2019-08-30 11:01