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单元格多列合并的实现
Nov 26 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue实现简易音乐播放器
Aug 14 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笔试题
2009/08/04 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php-msf源码详解
2017/12/25 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python实现字符串和数字拼接
2020/03/02 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
瑞典度假品牌:OAS
2019/05/28 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
工作推荐信模板
2015/03/25 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
python​格式化字符串
2022/04/20 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python