饿了么慕课网学习手记(三)加入购物车动画

1.加入购物车按钮组件

将加入购物车按钮部分抽离成一个组件,因为会多次复用到,即:
在这里插入图片描述

//carControl.vue





2.购物车小球动画实现

点击加号时会在该处弹出一个小球,然后抛物线落入购物车中
原代码的思想是正序将小球的show依次变为true,然后倒序遍历,取到第一个为true的小球然后开始动画,这就存在一个bug,当动画的时间变长,五个小球全用完时,第一个小球落地变为false,再次点击时取到的是最后一个小球;现该bug已经改正

//shopCar.vue





3.在父组件goods.vue中调用

//展示需要的一部分代码



你可能感兴趣的:(前端手记,慕课网饿了么,vue,动画)