时间:2021-05-26
我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-ui
小球的组成主要是分为外层,内层以及内容层
内层控制小球的x方向,外层y方向移动
把点击事件的对象传入小球中
beforeEnter, enter, afterEnter是transition组件的三个钩子函数对应动画开始前,动画开始,动画结束三个阶段.
这个钩子的主要作用就是计算动画的开始位置
这里有个一个坑,在这里我们需要手动触发浏览器的重绘,这里因为通过js修改的style不会及时更新,组件的display属性还是none所以不会有任何过渡.重绘后这里的display就是block了,transition可以正常过渡.
过渡动画结束,并且销毁整个小球的实例
其实如果要让组件更加通用需要初始化过渡目标的坐标,在这里代码就不贴了,思路和初始化小球一样
要触发小球组件就必须调用小球组件的show方法,调用show方法的唯一途径就是获取小球组件的实例. 这样问题就变成如何在vm上绑定小球实例.Vue中有两种方式可以获取组件实例一种是extend另外一种为render函数,
这里相当于提供了一个install方法,然后再main方法中use,全局挂载会更美观,这里小球挂载基本上已经全部完成了
以上就是Vue实现指令式动态追加小球动画组件的步骤的详细内容,更多关于Vue实现指令式动态追加小球动画组件的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了Vue动态组件与v-once指令的实现,分享给大家,具体如下:changeVue.component('child-one',{template:`c
1.Vue指令 Vue提供自定义实现指令的功能,和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.
Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。全局组件在Vue
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考,具体如下:点击按钮时,自动切换两个组件,当点击按钮之后,会自动清除原来的组件,显示新的组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件概述 通过使用保留的元素,动态地绑定到它的is特性,可以实现动