快捷導(dǎo)航

Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的步驟

更新時(shí)間：2020年12月18日 09:15:27 作者：面向谷歌百度開(kāi)發(fā)工程師

這篇文章主要介紹了Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫(huà)組件的步驟，幫助大家更好的理解和實(shí)用vue，感興趣的朋友可以了解下

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 class="ball" 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é)束,并且銷(xiāo)毀整個(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]
 // 組件掛載銷(xiāo)毀方法
 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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: