1. 小球組件

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

template模板

<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>

小球的組成主要是分為外層,內(nèi)層以及內(nèi)容層內(nèi)層控制小球的x方向,外層y方向移動(dòng)

props

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

把點(diǎn)擊事件的對(duì)象傳入小球中

主要核心js

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組件的三個(gè)鉤子函數(shù)對(duì)應(yīng)動(dòng)畫(huà)開(kāi)始前,動(dòng)畫(huà)開(kāi)始,動(dòng)畫(huà)結(jié)束三個(gè)階段.

beforeEnter

這個(gè)鉤子的主要作用就是計(jì)算動(dòng)畫(huà)的開(kāi)始位置

enter

這里有個(gè)一個(gè)坑,在這里我們需要手動(dòng)觸發(fā)瀏覽器的重繪,這里因?yàn)橥ㄟ^(guò)js修改的style不會(huì)及時(shí)更新,組件的display屬性還是none所以不會(huì)有任何過(guò)渡.重繪后這里的display就是block了,transition可以正常過(guò)渡.

afterEnter

過(guò)渡動(dòng)畫(huà)結(jié)束,并且銷毀整個(gè)小球的實(shí)例

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

2. 掛載小球動(dòng)畫(huà)

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

create函數(shù)

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

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

這里相當(dāng)于提供了一個(gè)install方法,然后再main方法中use,全局掛載會(huì)更美觀,這里小球掛載基本上已經(jīng)全部完成了

使用

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

以上就是Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！