Vue.js添加购物车小球动画

时间：2023-04-05 22:55:04 HTML5

在购物车组件Cart.vue中，添加小球代码defineballdatainexportdefaultdata(){return{balls:[//生成一个动画球的div，生成5个球，5个是生成一定数量的球作为一个运行，根据小球动画的速度，一般来说，5个小球也可以保证足够的小球数量来运行动画{show:false//维持当前小球的状态},{show:false},{show:false},{show:false},{show:false}],dropBalls:[],//dropBalls数组接收掉落的球，用于存放掉落的球fold:true//购物车详情列表默认折叠}////触发事件会遍历所有掉落的球(el){//el表示点击的按钮icon-add_circle，不是球for(leti=0;i{//回调函数异步执行，两个动画效果不会卡住el.style.webkitTransform='translate3d(0,0,0)';el.style.transform='translate3d(0,0,0)';letinner=el.getElementsByClassName('inner-hook')[0];inner.style.webkitTransform='translate3d(0,0,0)';inner.style.transform='translate3d(0,0,0)';el.addEventListener('transitionend',done);});},afterDrop(el){//动画进入后letball=this.dropBalls.shift();//完成一个动画后，删除一个dropBalls球if(ball){ball.show=false;el.style.display='无';//隐藏球}}，样式：.ball-container.ballposition:fixedleft:32pxbottom:22pxz-index:200transition:all0.4scubic-bezier(0.49,-0.29,0.75,0.41).inner宽度：16pxheight:16pxborder-radius:50%background:rgb(0,160,220)transition:all0.4slinear在Cartcontrol.vue中添加商品组件，给父组件Goods.vu组件传递参数

//添加购物车中的商品数量addCart(ele){if(!ele._constructed){//better-scrolldispatchevent滚动事件和PC浏览器点击事件的event有一个//属性区别_constructed，PC浏览器的点击事件的事件没有这个属性return；}//一开始，食物计数中没有产品数量if(!this.food.count){//this.food.count=1;count不是food对象中的属性，直接给food增加一个新的属性count，//当count的值发生变化时，在dom中渲染时无法感知count的变化this.$set(this.food,'count',1);}else{this.food.count++;}//给父组件Goods传参this.$emit('add',ele.target);},父组件Goods.vu收到子组件的添加商品信号后

addFood(target){this._drop(target);},_drop(target){//体验优化，异步执行掉落动画this.$nextTick(()=>{//target代表点击添加商品按钮icon-add_circlethis.$refs.shopcart.drop(target);//$refs.shopcart组件中的访问方法drop});}