Vue实现指令式动态追加小球动画组件的步骤
时间：2021-03-18 09:42:00|栏目：vue|点击： 次
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,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组件的三个钩子函数对应动画开始前,动画开始,动画结束三个阶段.
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
本文地址：http://www.codeinn.net/misctech/82893.html
