我們希望可以封裝一個通用的小球動畫組件,這個組件可以在任何地方調動,而且小球組件可以通過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) { // 觸發重繪 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組件的三個鉤子函數對應動畫開始前,動畫開始,動畫結束三個階段.

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

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

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

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

要觸發小球組件就必須調用小球組件的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實現指令式動態追加小球動畫組件的步驟的詳細內容，更多關于Vue實現指令式動態追加小球動畫組件的資料請關注好吧啦網其它相關文章！