本文通过一个实例讲述了vue实现购物车抛物线球动画效果的方法。分享给大家参考，如下：

首先，进入最终效果图。在产品页面和产品详情页面点击加号添加产品时，可以看到球的抛物线落入购物车的动画效果

本文只写了购物球在产品页面的实现，产品详情页的原理也差不多

实施步骤：

1.需要三个组件，包括底部蓝色购物车的shopCart.vue(子组件)，每个加号和减号组成的购物球组件的cartControl.vue(子组件)，以及包含每个商品信息的商品组件goods.vue(父组件)。

2.原理，当购物球组件点击加号时，在外部触发一个事件，将球对象本身传递给父组件商品组件，然后商品作为桥梁将这个信息传递给另一个子组件SHOCART组件。SHOCART组件获取球对象后，计算球的位置，从而实现从不同位置添加物品的抛物线球效果。

3.cartControl.vue部分代码

Html代码

div class='cartControl '转换名称='move '！-减少商品-div class=' reduce ' v-show=' food . count 0 ' @ click . stop . prevent=' reduce cart ' span class=' inner icon font '/span/div/transition！-添加商品-div class=' count ' v-show=' food . count 0 ' { food . count } }/div！-单击加号按钮触发事件addCart，并将事件对象作为参数传递-div class=' addiconfet ' @ click。停下来。防止=' addcart ($ event)'/div/div js代码

//addCart事件addCart(事件){if(！事件。_constructed) return //检查事件分派是否来自better-scroll if(！This.food.count) {//给观察对象添加不存在的属性时，无法直接赋值。你需要设置这个属性。食物，数数，1)其他。食物。数一下这个。$ emit ('cart-add '，事件。target)//触发自定义cart-add事件到父组件，并将事件对象传递到父组件}，4。部分商品代码

Html代码

！-加减商品-div class='购物车控制-包装'！-听到父组件中的子组件触发的cart-add事件-cart-control : food=' food ' @ cart-add=' handlecardad '/cart-control/div js代码知识点：子组件和父组件之间的数据传输

_drop (target) {//在goods.vue中定义_drop方法，将cartcontrol的目标对象传递给shopCart this。$nextTick(()={//使用$nextTick来优化此的体验。$ refs . shopCart . drop(target)//父组件商品通过访问shop cart子组件的drop方法。$ refs attribute })}、handlecardad(target){//单击加号按钮触发此事件。_drop(target) //调用_drop方法} 5。购物车

(1)定义一个数组存储五个球，可以满足动画运行

动画分为两层，外层控制球的Y轴方向和运动轨迹，内层控制X轴方向的运动

.使用js动画钩子，vue在实现动画的时候提供了几个javascript钩子，可以和css动画一起使用，也可以单独使用。因为购物车抛物球只进入动画，不离开动画，所以enter的钩子是前入、后入、后入。这些钩子需要在html属性中声明，然后在方法中使用这些方法。

参考以下官方网站

https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-胡克

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

超文本标记语言

！-购物车ball-div class=' ball-container ' div v-for='(ball，index)of balls ' : key=' index ' transition @ before-enter=' handlebeforenter ' @ enter=' handlebeforenter ' @ before-enter=' handlebeforenter ' div class=' ball ' v-show=' ball . show ' v-bind 3360 CSS=' false '！-外盒-div class='内内钩'/div！-内盒/div/过渡/div/divdata

data () { return { //使用球存放5个小球，这些小球的默认状态都是不显示的balls: [{show: false}、{show: false}、{show: false}、{show: false}]、Dropballs 3360[]//用空投球来存放掉落的小球}}在方法中定义方法

//当触发滴方法时小球开始掉落drop (el) { for(让I=0；我这个。球。长度；i ) { //遍历这5个小球let ball=this.balls[i] if(！ball.show) { //当小球显示状态为隐藏时ball.show=true //将这个小球的显示状态设置为true ball.el=el //将cartControl传过来的对象挂载到球的埃尔属性上this.dropBalls.push(ball) //将这个小球放入到空投球数组中返回} }}js动画

//js动画钩子//befornthandlebeforente :函数(El){让计数=这个。球。长度while(count-){ let ball=this。球数。show){让rect=ball。埃尔。getBoundingClientRect()//getBoundingClientRect()获取小球相对于视窗的位置，屏幕左上角坐标为0,0让x=rect.left - 32 /小球x方向位移=小球距离屏幕左侧的距离-外层盒子距离水平的距离让y=-(窗口。内部高度-矩形。top-22)//负数，因为是从左上角向下埃尔。风格。显示=' El。风格。WebKittransform=` translate 3d(0，${y}px，0)` //设置外层盒子，即小球垂直方向的位移埃尔。风格。transform=` translate 3d(0，${y}px，0)` let inner=El。getelementsbyclassname(' inner-hook ')[0]内部。风格。webkittransform=` translate 3d($ { x } px，0，0)` //设置内层盒子，即小球水平方向的距离内心。风格。transform=` translate 3d($ { x } px，0，0)` } }，//enterhandleEnter:函数(el，done){/* eslint-disable no-unused-vars *//触发浏览器重绘让RF=El。抵消解决这个问题$nextTick(()={ //让动画效果异步执行，提高性能埃尔。风格。webkittransform=' translate 3d(0，0，0)'//设置小球掉落后最终的位置埃尔。风格。transform=' translate 3d(0，0，0)' let inner=El。getelementsbyclasname(' inner-hook ')[0]内部。风格。webkittransform=' translate 3d(0，0，0)' inner。风格。translate=' translate 3d(0，0，0)' El。add event listener(' transitionend，done) //Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是过渡和或animationend })}，handleAfterEnter:函数{让球=这个。空投球。shift()//完成一次动画就删除一个空投球的小球如果球。show=false El。风格。display=none } }，希望本文所述对大家vue.js程序设计有所帮助。