來自：https://segmentfault.com/a/1190000009294321 （侵刪）
git 源碼地址 https://github.com/ustbhuangyi/vue-sell（侵刪）
html代碼
-
生成一個動畫小球的div,並且生成五個小球,五個是為了生成一定數量的小球來作為操作使用,按照小球動畫的速度,一般來說五個也可以保證有足夠的小球數量來運行動畫
-
動畫的內容分別是外層和內層,外層控制動畫小球的軌道和方向,內層控制動畫小球的運行狀態
-
動畫使用vue的js鈎子實現
-
因為小球動畫只有一個方向(只執行單方向從上到下滾落),所以只用了before-enter,enter,after-enter
-
用v-show控制小球的可見性,在動畫執行期間可見,其余時候隱藏
<div class="ball-container"> <div v-for="ball in balls"> //用了兩種方式的動畫,css和js鈎子 <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"> //外層動畫 <div class="ball" v-show="ball.show"> //內層動畫 <div class="inner inner-hook"></div> </div> </transition> </div> </div>
js代碼
-
設置了balls數組來代表五個小球
-
設置了dropBalls數組正在運行的小球
-
data(){ return { balls: [ {show: false}, {show: false}, {show: false}, {show: false}, {show: false} ], dropBalls: [] } },
-
只要觸發了drop事件,不止是drop事件里面的代碼會執行,另外幾個vue的js監聽鈎子也會一起按順序執行
-
觸發了drop事件
-
beforeDrop開始執行
-
dropping開始執行
-
afterDrop開始執行
-
-
drop事件的觸發可以通過點擊cartcontrol組件的添加小球按鈕addCart事件觸發使用
$emit,也可以父組件this.$refs.shopcart.drop(target);直接觸發-
這么做的目的是實現,在子組件cartcontrol點擊之后,可以將該dom傳給父組件goods然后再傳給子組件shopcart,(因為目前他們之間的通道就是這樣,shopcart子組件並沒有導入cartcontrol子組件,所以沒有直接通訊)這樣就實現了多個組件之間的通訊,從而可以實現需求,例如這里就是實現點擊子組件cartcontrol后添加一個動畫,將小球滑落到另外一個組件shopcart
-
-
$emit是觸發當前實例上的事件。附加參數都會傳給監聽器回調。
-
methods: { drop(el) { //觸發一次事件就會將所有小球進行遍歷 for (let i = 0; i < this.balls.length; i++) { let ball = this.balls[i]; if (!ball.show) { //將false的小球放到dropBalls ball.show = true; ball.el = el; //設置小球的el屬性為一個dom對象 this.dropBalls.push(ball); return; } } }, beforeDrop(el){ //這個方法的執行是因為這是一個vue的監聽事件 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.display = ''; //清空display el.style.webkitTransform = `translate3d(0,${y}px,0)`; el.style.transform = `translate3d(0,${y}px,0)`; //處理內層動畫 let inner = el.getElementsByClassName('inner-hook')[0]; //使用inner-hook類來單純被js操作 inner.style.webkitTransform = `translate3d(${x}px,0,0)`; inner.style.transform = `translate3d(${x}px,0,0)`; } } }, dropping(el, done) { //這個方法的執行是因為這是一個vue的監聽事件 /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; //觸發重繪html this.$nextTick(() => { //讓動畫效果異步執行,提高性能 el.style.webkitTransform = 'translate3d(0,0,0)'; el.style.transform = 'translate3d(0,0,0)'; //處理內層動畫 let inner = el.getElementsByClassName('inner-hook')[0]; //使用inner-hook類來單純被js操作 inner.style.webkitTransform = 'translate3d(0,0,0)'; inner.style.transform = 'translate3d(0,0,0)'; el.addEventListener('transitionend', done); //Vue為了知道過渡的完成，必須設置相應的事件監聽器。 }); }, afterDrop(el) { //這個方法的執行是因為這是一個vue的監聽事件 let ball = this.dropBalls.shift(); //完成一次動畫就刪除一個dropBalls的小球 if (ball) { ball.show = false; el.style.display = 'none'; //隱藏小球 } } }
-
關於drop方法,是實現每一個ball的show屬性和el屬性處理,並且點擊一次會自動將一個小球放到dropBalls數組里面,放到里面就代表的是一個小球已經被開始執行動畫,但是由於動畫是異步的,所以先主動設置.
-
關於getBoundingClientRect(位移的計算是從左上角開始)
-
使用getBoundingClientRect獲取到當前元素的坐標,然后需要位移的left減去元素的寬獲取真正的最終位移x坐標
-
使用getBoundingClientRect獲取到當前元素的坐標,然后需要當前屏幕的高度減去元素的top再減去元素本身的高度獲取到真正的最終位移y坐標,並且這個是負數,因為是從左上角往下的方向
-
-
關於html重繪
-
因為瀏覽器對於重繪是有要求並且是有隊列完成的,這是主要為了性能,雖然動畫隱藏了小球
display none,但沒有觸發html重繪,或者說沒有立即觸發html重繪,所以需要手動 -
let rf = el.offsetHeight;這是一個手動觸發html重繪的方法
-
css代碼
-
.ball-container .ball position: fixed //小球動畫必須脫離html布局流 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: rgb(0, 160, 220) transition: all 0.4s linear
關於
cubic-bezier(0.49, -0.29, 0.75, 0.41),是動畫拋物曲線(貝塞爾曲線)的配置,基於css3實現,http://cubic-bezier.com/#.17,.67,.83,.67,參考貝塞爾曲線與CSS3動畫、SVG和canvas的基情 ,至於拋物線放在外層就是為了控制內層的元素的軌道和方向的.
-