快活林资源网 Design By www.csstdc.com
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实现指令式动态追加小球动画组件的步骤的详细内容,更多关于Vue实现指令式动态追加小球动画组件的资料请关注其它相关文章!
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- SALLY李莎丽《EASTERN YOUTH》[320K/MP3][14.49MB]
- 原音母版1:1直刻《民谣精逊[低速原抓WAV+CUE]
- 原音母版1:1直刻《卓依婷精选集》[低速原抓WAV+CUE]
- 【佛之吧沙发】VA-BuddhaBar-BestOf2byRavin(FLAC)
- [ABC唱片]-《雪莉—蓝》[SACD-008][SACD][WAV+CUE]
- 黎瑞恩.2002-理想的日子精选2CD【环球】【WAV+CUE】
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]