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

素颜马尾好姑娘i 2023-06-03 04:53 16阅读 0赞

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

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 可以搜搜看哦

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

posted on 2019-08-19 21:03 [blankOne][] 阅读( ...) 评论( ...) [ 编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/blankOne/p/11379696.html

[Vue]: https://www.cnblogs.com/blankOne/p/11379696.html
[blankOne]: https://www.cnblogs.com/blankOne/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11379696

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue如何实现购物车小球的显示及旋转飞入到底部徽标的动画

一、购物车小球实现与飞入动画 1. 在 `vue` 的页面中定义一个小球，通过 `v-show` 使用 `ballFlag` 的值设置小球的显示与隐藏，`ref` 是小

痛定思痛。/ 2023年07月24日 08:15/ 0 赞/ 20 阅读

相关 vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画) <!DOCTYPE html> <html lang="en"> <h

Love The Way You Lie/ 2023年06月29日 05:53/ 0 赞/ 30 阅读

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

[在Vue中如何快速实现小球动画][Vue] 1. 在自己的页面中有做好相应的测试位置 2. 然后给小球添加属性 v-show并且添加相应的数据（false） 3.点击购

素颜马尾好姑娘i/ 2023年06月03日 04:53/ 0 赞/ 17 阅读

相关如何从Vue中快速入手小程序

什么是小程序？微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用微信小程序的使用流程 1.注册地址

港控/mmm°/ 2022年12月23日 03:17/ 0 赞/ 155 阅读

相关如何实现vue中的列表动画，如何封装vue动画

文章目录一、vue中的列表动画如何实现列表动画原理: 二、vue中如何封装动画第1个版本：css动

忘是亡心i/ 2022年10月22日 02:47/ 0 赞/ 227 阅读

相关纯CSS弹性小球动画js特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/fc79e842463c44f

喜欢ヅ旅行/ 2022年09月13日 14:20/ 0 赞/ 264 阅读

相关（十二）小球动画实现

在商品页面，当我们添加商品的时候，即点击“+”按钮，会有一个小球做抛物线的动作降到左下角的购物车里面的动作，现在就讲讲如何实现小球做抛物线的动作。 ![20180505091

偏执的太偏执、/ 2022年05月25日 00:53/ 0 赞/ 191 阅读

相关 css动画小案例弹力球

什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比

系统管理员/ 2022年03月25日 03:28/ 0 赞/ 332 阅读

相关基于vue2.0实现购物车小球飞入的动画

菜鸡第一次写博客，看懂了的同学记得点个小星星哦这篇文章是我在慕课网上看vue仿造饿了么外卖APP的项目教程中购物车小球飞入动画所得出的总结，老师是采用vue1.0开发，

偏执的太偏执、/ 2021年11月10日 08:06/ 0 赞/ 1005 阅读

相关 canvas画布实现创建20个小球,小球在画布内碰壁反弹

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

曾经终败给现在/ 2021年09月16日 04:22/ 0 赞/ 444 阅读