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


Posted in Vue.js onDecember 18, 2020

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实现指令式动态追加小球动画组件的步骤的详细内容,更多关于Vue实现指令式动态追加小球动画组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue实现图书管理小案例
Dec 03 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
You might like
PHP安全配置
2006/10/09 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python并行分布式框架Celery详解
2018/10/15 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
python高级特性简介
2020/08/13 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
高中班主任评语大全
2014/04/25 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2015年采购工作总结
2015/04/10 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers