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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
List Installed Hot Fixes
2007/06/12 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python代码实现KNN算法
2017/12/20 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python装饰器语法糖
2019/01/02 Python
python实现月食效果实例代码
2019/06/18 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python 必须了解的5种高级特征
2020/09/10 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
早餐连锁店计划书
2014/01/08 职场文书
网络工程师职业规划
2014/02/10 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
横店影视城导游词
2015/02/06 职场文书
2015政治思想表现评语
2015/03/25 职场文书
三十年同学聚会感言
2015/07/30 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers