文档章节

在Vue中如何快速实现小球动画

o
 osc_g8254g7s
发布于 2019/08/19 21:03
字数 235
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

1. 在自己的页面中有做好相应的测试位置

2. 然后给小球添加属性 v-show并且添加相应的数据(false)

3.点击购物车 让 false = true;

4.然后到重点了;  用 transition的标签 把要运动的小球包起来

<transition @before-enter='beforeEnter' @enter='enter'  @after-enter='afterEnter'>   小球 </transition>

 

5.在  methods 里 定义你上面写的方法:

beforeEnter(el) {

  el.style.transform = ' translate( 0,0 )'

},

enter(el,done) {

  el.offsetWidth;

  el.style.transform = 'translate( 0,0 )                   [ 这里写的是终点位置 , 上面是起始位置 ]

  el.style.transition = 'all' 1s ease' ;

},

afterEnter(el){

  this.ballFlag = !this.ballFlag;                             [ 这里的ballFlag是 一个自己设定变量 true,或者 false ]

 

6.这里 要在第五步的时候 把小球 的最终落点定好,  直接添加在第五步的  enter函数中;

 

 

这里有个好玩的页面是 设计 球的运动轨迹的;     叫   cubic-bezier   可以搜搜看哦

 

 

到这里就结束啦~   应该就可以实现了.

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Git本地分支和远程分支关联

转载:https://blog.csdn.net/cherishhere/article/details/52606884 转载:https://blog.zengrong.net/post/1746.html 转载:https://blog.csdn.net/xinghuowuzhao/article/details/78663526 转......

osc_ur9jjorb
20分钟前
10
0
移动应用测试方法与思路

标签(空格分隔): 浅谈移动应用测试方法与思路 在 GUI 自动化测试这个系列,我讲了很多基于浏览器的业务测试的内容,你可能会说,现在移动 App 大行其道,对移动应用测试的方法和思路才更重...

osc_avdbd8s3
22分钟前
9
0
搜索所有Git历史记录中的字符串? [重复] - Search all of Git history for a string? [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How to grep Git commit diffs or contents for a certain word? 如何grep Git为某个单词提交差异或内容? 8 ...

fyin1314
23分钟前
12
0
css实现圆形倒计时效果

实现思想: 1.最外层包裹内部的div1(.box) 2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div 3.在左右两个div2中各有一个div3(.left_item...

osc_sg74u54s
23分钟前
7
0
python语言中threading.Thread类的使用方法

1. 编程语言里面的任务和线程是很重要的一个功能。在python里面,线程的创建有两种方式,其一使用Thread类创建 # 导入Python标准库中的Thread模块 from threading import Thread # 创建一...

osc_q5urtsdm
24分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部