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 的 v-model用法实例
Nov 23 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python编程线性回归代码示例
2017/12/07 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python如何给你的程序做性能测试
2020/07/29 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
2014年科普工作总结
2014/12/06 职场文书
公务员个人考察材料
2014/12/23 职场文书
先进人物事迹材料
2014/12/29 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏