1. 小球元件

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

template模板

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

</template>

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

props

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

把點選事件的物件傳入小球中

主要核心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)`
   },enter(el,done) {
    // 觸發重繪
    document.body.offsetHeight
    el.style.transform = 'translate3d(0,0)'
    const inner = el.querySelector('.inner')
    inner.style.transform = `translate3d(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元件的三個鉤子函式對應動畫開始前,動畫開始,動畫結束三個階段.

beforeEnter

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

enter

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

afterEnter

過渡動畫結束,並且銷燬整個小球的例項

其實如果要讓元件更加通用需要初始化過渡目標的座標,在這裡程式碼就不貼了,思路和初始化小球一樣

2. 掛載小球動畫

要觸發小球元件就必須呼叫小球元件的show方法,呼叫show方法的唯一途徑就是獲取小球元件的例項. 這樣問題就變成如何在vm上繫結小球例項.Vue中有兩種方式可以獲取元件例項一種是extend另外一種為render函式,

create函式

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實現指令式動態追加小球動畫元件的資料請關注我們其它相關文章！