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与React的区别和优势对比
Dec 18 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue3不同环境下实现配置代理
May 25 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 has encountered an Access Violation
2007/01/15 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python创建字典的八种方式
2019/02/27 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python作用域和名称空间的详细介绍
2022/04/13 Python