购物车动画

解决数字选择框不能正常加减数字的问题

• 初始化数字选择框，在数字选择框组件goodsinfo-numbox.vue中

---

购物车动画

1. 实现加入购物车小球动画，创建一个小球，设置大小并定位到数字选择框

.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index:99;
    top: 390px;
    left: 146px;
}

2. 设置小球的出现和隐藏

data(){
  return{
      ballFlag:false//控制小球隐藏和显示
  }
},

addToShopCar(){
    this.ballFlag=!this.ballFlag
}

3. 实现小球移动，首先把小球放入一个transition标签中，要实现半场动画，需要创建三个钩子函数

beforeEnter(el){
    el.style.transform="translate(0,0)";

},
enter(el,done){
    el.offsetWidth;
    el.style.transform="translate(93px,230px)"
    el.style.transition='all 1s cubic-bezier(.4,-0.3,1,.68'
    done()
},
afterEnter(el) {
    this.ballFlag=!this.ballFlag
}

4. 这样的小球会在不滚动页面，不更改分辨率的情况下才可以完成精准进入购物车的动画,因此位移的坐标不能直接写成一个确定值
5. 先得到购物车徽标的横纵坐标，在获得小球的横纵坐标，得到的差值就是应该位移的值，使用getBoundingClientRect()就可以获得一个对象坐标（顶部和左边的距离）
6. 在创建小球的元素中ref=ball，获取小球的坐标

const ballPosition=this.$refs.ball.getBoundingClientRect()

7. 由于购物车不属于这个组件，因此不能在本页面直接使用getBoundingClientRect()获得徽标的坐标，所以可以通过操作DOM来获取这个元素的坐标

const badgePosition=document.getElementById('badge').getBoundingClientRect()

8. 将两个点的坐标相减即可获取差值

const xDist=badgePosition.left-ballPosition.left
const yDist=badgePosition.top-ballPosition.top

9. 将获取的差值作为移动距离，即可实现在任何设备很分辨率之下购物车的动画都能完整准确

el.style.transform=`translate(${xDist}px,${yDist}px)`

---