我們希望可以封裝一個通用的小球動畫組件,這個組件可以在任何地方調動,而且小球組件可以通過this.$ball({...props})這樣的方式調用,讓他在用法上接近element-ui

<template> <div class='ball-wrapper'> <transition @before-enter='beforeEnter'@enter='enter'@after-enter='afterEnter'name='ball'> <div ref='ball' v-show='ballShow'> <div class='inner'> <div class='cube'></div> </div> </div> </transition> </div></template>

小球的組成主要是分為外層,內層以及內容層內層控制小球的x方向,外層y方向移動

props: { el: { type: MouseEvent }, },

把點擊事件的對象傳入小球中

beforeEnter(el) { const x = this.rect.left - window.innerWidth / 2 const y = -(window.innerHeight - this.rect.top - 140) el.style.display = ’block’ el.style.transform = `translate3d(0,${y}px,0)` const inner = el.querySelector(’.inner’) inner.style.transform = `translate3d(${x}px,0,0)` }, enter(el, done) { // 觸發(fā)重繪 document.body.offsetHeight el.style.transform = ’translate3d(0,0,0)’ const inner = el.querySelector(’.inner’) inner.style.transform = `translate3d(0,0,0)` el.addEventListener(’transitionend’, done) }, afterEnter(el) { this.ballShow = false el.style.display = ’none’ this.remove() }, show() { const dom = this.el.target this.rect = dom.getBoundingClientRect() this.ballShow = true },

beforeEnter, enter, afterEnter是transition組件的三個鉤子函數對應動畫開始前,動畫開始,動畫結束三個階段.

這個鉤子的主要作用就是計算動畫的開始位置

這里有個一個坑,在這里我們需要手動觸發(fā)瀏覽器的重繪,這里因為通過js修改的style不會及時更新,組件的display屬性還是none所以不會有任何過渡.重繪后這里的display就是block了,transition可以正常過渡.

過渡動畫結束,并且銷毀整個小球的實例

其實如果要讓組件更加通用需要初始化過渡目標的坐標,在這里代碼就不貼了,思路和初始化小球一樣

要觸發(fā)小球組件就必須調用小球組件的show方法,調用show方法的唯一途徑就是獲取小球組件的實例. 這樣問題就變成如何在vm上綁定小球實例.Vue中有兩種方式可以獲取組件實例一種是extend另外一種為render函數,

function create(comp, props) { const vm = new Vue({ // h就是createElement,組件生成vdom render: h => h(comp, {props}) }).$mount() // 追加真實dom document.body.appendChild(vm.$el) // 由于使用的是新的Vue實例,所以children的第0個就是comp實例化后的組件 const component = vm.$children[0] // 組件掛載銷毀方法 component.remove = function() { document.body.removeChild(vm.$el) vm.$destroy() } // 返回組件實例 return component}protoType

export default (Vue) => { Vue.prototype.$ball = props => { create(BallAnimation, props).show() }}

這里相當于提供了一個install方法,然后再main方法中use,全局掛載會更美觀,這里小球掛載基本上已經全部完成了

ballAnitmation(el) { this.$ball({ el }) }最終效果

以上就是Vue實現指令式動態(tài)追加小球動畫組件的步驟的詳細內容，更多關于Vue實現指令式動態(tài)追加小球動畫組件的資料請關注好吧啦網其它相關文章！