Vue实现指令式动态追加小球动画组件的步骤

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

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

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
}

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

ballAnitmation(el) {
    this.$ball({
     el
    })
   }