vue实现购物车抛物线小球动画效果的方法详解


Posted in Javascript onFebruary 13, 2019

本文实例讲述了vue实现购物车抛物线小球动画效果的方法。分享给大家供大家参考,具体如下:

vue实现购物车抛物线小球动画效果的方法详解

先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果

此文章只写了商品页面购物小球的实现,商品详情页原理类似

实现步骤:

1. 需要三个组件,最下方包含蓝色购物车的【购物车】组件shopCart.vue(子组件),每个【加减号】组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件)

2. 原理,购物小球组件在点击加号的时候对外触发事件,将小球对象本身传递给父组件goods组件,再由goods作为桥梁将这个信息传递给另一个子组件shopCart组件,shopCart组件获取到小球对象后,对该小球进行位置计算,从而实现从不同商品的位置添加商品的抛物线小球效果

3. cartControl.vue部分代码

html代码

<div class="cartControl">
  <transition name="move">
  <!--减少商品-->
  <div class="decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart">
   <span class="inner iconfont"></span>
  </div>
  </transition>
  <!--增加商品-->
  <div class="count" v-show="food.count>0">{{food.count}}</div>
  <!--点击加号按钮,触发事件addCart,将事件对象作为参数传递-->
  <div class="add iconfont" @click.stop.prevent="addCart($event)">?</div>
</div>

js代码

// addCart事件
addCart (event) {
  if (!event._constructed) return // 检测事件派发是否来自于better-scroll
  if (!this.food.count) {
  // 当给一个观测对象添加一个它不存在的属性的时候,直接赋值是不可以的,需要使用Vue.set设置这个属性
  Vue.set(this.food, 'count', 1)
  } else {
  this.food.count++
  }
  this.$emit('cart-add', event.target) // 向父组件触发一个自定义的cart-add事件,同时将事件对象传递给父组件
},

4. goods.vue部分代码

html代码

<!--加减商品-->
<div class="cartControl-wrapper">
 <!--在父组件监听到子组件触发的cart-add事件-->
 <cart-control :food="food" @cart-add="handlecartAdd"></cart-control>
</div>

js代码 知识点:子组件和父组件之间的数据传递

_drop (target) { // 在goods.vue定义 _drop方法将cartcontrol的传递过来target对象再传递给shopCart
  this.$nextTick(() => { // 使用$nextTick优化体验
  this.$refs.shopCart.drop(target) // 父组件goods通过.$refs属性访问shopCart子组件的drop方法
  })
},
handlecartAdd (target) { // 点击加号按钮触发事件
  this._drop(target)  // 调用_drop方法
}

5. shopCart.vue部分代码

①.定义一个数组,存放5个小球,这5个小球可以满足的动画的运行

②.动画分为两层,外层控制小球y轴方向和运动的轨道,内层控制x轴方向的运动

③.使用js动画钩子,vue在实现动画的时候提供了几个javascript钩子,可配合css动画一起使用,也可单独使用,因为购物车抛物线小球只有进入动画,没有离开的动画,所以enter的钩子有,before-enter,enter,after-enter,这些钩子需要在html属性中声明,然后在methods中使用这些方法

可参考以下官网

https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

④.v-show控制盒子的显示和隐藏

html

<!--购物车小球-->
  <div class="ball-container">
  <div v-for="(ball,index) of balls" :key="index">
   <transition @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter">
   <div class="ball" v-show="ball.show" v-bind:css="false"><!--外层盒子-->
    <div class="inner inner-hook"></div> <!--内层盒子-->
   </div>
   </transition>
  </div>
  </div>

data

data () {
 return { // 使用balls存放5个小球,这些小球的默认状态都是不显示的
  balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],
  dropBalls: [] // 用dropBalls来存放掉落的小球
 }
}

在methods中定义方法

// 当触发drop方法时小球开始掉落
drop (el) {
  for (let i = 0; i < this.balls.length; i++) { // 遍历这5个小球
  let ball = this.balls[i]
  if (!ball.show) { // 当小球显示状态为隐藏时
   ball.show = true // 将这个小球的显示状态设置为true
   ball.el = el  // 将cartControl传过来的对象挂载到ball的el属性上
   this.dropBalls.push(ball) // 将这个小球放入到dropBalls数组中
   return
  }
  }
}

js动画

// js动画钩子
// beforeenter
handleBeforeEnter: function (el) {
  let count = this.balls.length 
  while (count--) {
  let ball = this.balls[count]
  if (ball.show) {
   let rect = ball.el.getBoundingClientRect() // getBoundingClientRect()获取小球相对于视窗的位置,屏幕左上角坐标为0,0
   let x = rect.left - 32 // 小球x方向位移= 小球距离屏幕左侧的距离-外层盒子距离水平的距离
   let y = -(window.innerHeight - rect.top - 22) // 负数,因为是从左上角向下
   el.style.display = ''
   el.style.webkitTransform = `translate3d(0,${y}px,0)` // 设置外层盒子,即小球垂直方向的位移
   el.style.transform = `translate3d(0,${y}px,0)`
   let inner = el.getElementsByClassName('inner-hook')[0]
   inner.style.webkitTransform = `translate3d(${x}px,0,0)` // 设置内层盒子,即小球水平方向的距离
   inner.style.transform = `translate3d(${x}px,0,0)`
  }
  }
},
// enter
handleEnter: function (el, done) {
  /* eslint-disable no-unused-vars */
  // 触发浏览器重绘
  let rf = el.offsetHeight
  this.$nextTick(() => { // 让动画效果异步执行,提高性能
  el.style.webkitTransform = 'translate3d(0, 0, 0)'// 设置小球掉落后最终的位置
  el.style.transform = 'translate3d(0, 0, 0)'
  let inner = el.getElementsByClassName('inner-hook')[0]
  inner.style.webkitTransform = 'translate3d(0, 0, 0)'
  inner.style.transform = 'translate3d(0, 0, 0)'
  el.addEventListener('transitionend', done) // Vue为了知道过渡的完成,必须设置相应的事件监听器。它可以是transitionend或 animationend
  })
},
handleAfterEnter: function (el) {
  let ball = this.dropBalls.shift() // 完成一次动画就删除一个dropBalls的小球
  if (ball) {
  ball.show = false
  el.style.display = 'none'
  }
},

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
javascript继承机制实例详解
Nov 20 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
vuex实现的简单购物车功能示例
Feb 13 #Javascript
jquery无缝图片轮播组件封装
Nov 25 #jQuery
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 #Javascript
vue写h5页面的方法总结
Feb 12 #Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 #Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 #Javascript
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
php的debug相关函数用法示例
2016/07/11 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python抓取京东商城手机列表url实例代码
2013/12/18 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python占位符输入方式实例
2019/05/27 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
园艺师求职信
2014/04/27 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
组工干部演讲稿
2014/09/02 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL