vue --- 加入购物车动画

需求
仿饿了么app的加入购物车动画

实现效果

页面只是随便做的，主要是那个动画效果~！

实现步骤

step1： 先实现静态页面

 <div class="pages-box">
    <div class="header-title color-white f16">加入购物车动画</div>
    <div class="produce-list">
      <div class="produce-item flex-imd" v-for="item in 10" :key="item">
        <div class="pic">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg002.hc360.cn%2Fk3%2FM04%2FA0%2F9F%2FwKhQx1d3Q9yEZxMrAAAAAPCri78557.jpg&refer=http%3A%2F%2Fimg002.hc360.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626398504&t=867d7cfb3ff4d9981f17aa65af64a8d3"
            alt=""
          />
        </div>
        <div class="info flex-imd flex-column">
          <div class="info-name tLeft two-line fBold">emm...我很丑..?那我走..?</div>
          <div class="info-price"><span class="fBold color-discounts">￥39.99</span><span class="f12 font-line-mid color-original">￥66.83</span></div>
        </div>
        <div class="icon">
          <img src="../../assets/images/shopCar.png" alt="">
        </div>
      </div>
    </div>
    <div class="statement flex-imd">
      <div class="shopcar-icon">
        <div class="num">3</div>
        <img src="../../assets/images/shopCar.png" alt="">
      </div>
      <div class="desc-info">
        <div class="sum f12 color-white">合计: ￥<span class="f16 fBold">399.90</span></div>
        <div class="economize f12 color-discounts">优惠: ￥<span class="f16 fBold">268.40</span></div>
      </div>
      <div class="buy-btn fBold">去结算</div>
    </div>
  </div>

.header-title{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #000;
  height: 40px;
  line-height: 40px;
}
.pages-box,.produce-list{
  width: 100%;
}
.produce-list{
  padding-top: 40px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

.produce-item{
  padding: 8px;
  border-bottom: 1px solid #f5f5f5;
}
.produce-item .pic{
  width: 80px;
  height: 80px;
}
.pic>img{
  width: 100%;
  vertical-align: middle;
}
.produce-item .info{
  width: calc((100% - 80px) * 70%);
  height: 80px;
  padding: 4px 8px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: space-between;
}

.info-price>span:first-child{
  margin-right: 8px;
}
.produce-item .icon{
  flex: 1;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  box-sizing: border-box;
}
.icon>img{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.statement{
  position: fixed;
  padding: 8px 16px;
  box-sizing: border-box;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #000;
  justify-content: space-between;
}
.shopcar-icon{
  position: absolute;
  top: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 8px rgb(184, 184, 184);
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopcar-icon>.num{
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
  background: #ffcc33;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 12px;
}
.shopcar-icon>img{
  width: 56px;
  height: 56px;
  vertical-align: middle;
}
.desc-info{
  margin-left: 100px;
  width: 140px;
  text-align: left;
  line-height: 22px;
}
.desc-info span{
  margin: 0px 4px;
}
.buy-btn{
  width: 100px;
  padding: 4px 8px;
  box-sizing: border-box;
  background: rgb(255,255,255);
  box-shadow: 0px 0px 8px rgb(184, 184, 184);
  color: #ffcc33;
  border-radius: 20px;
}

step2： 实现动画~~核心总在第二步

要实现一个怎么样的动画呢？
  — 我们要记录2个点，画一条抛物线。—
2个点：起点（选中商品）+ 终点（购物车）
画一条抛物线： 创建一个div，根据起点和终点，实现移动动画，在div到点终点后，清除div。

<div class="icon">
   <--添加点击事件-->
   <img @click="add" src="../../assets/images/shopCar.png" alt="">
</div>

// 加入购物车
    add (e) {
      // 页面滚动高度
      var scrolltopTemp = document.documentElement.scrollTop || document.body.scrollTop
      // 获取起点
      this.startPoint.x = e.pageX
      this.startPoint.y = e.pageY
      // 获取终点
       let target = document.querySelector('.shopcar-icon')
       let targetParent = target.offsetParent
       this.endPoint.y = targetParent.offsetTop + scrolltopTemp
       this.endPoint.x = target.offsetLeft + target.offsetWidth / 2
      // 插入div（ball）
      let ball = document.createElement('div')
      ball.className = 'ball'
      ball.style.top = this.startPoint.y + 'px'
      ball.style.left = this.startPoint.x + 'px'
      document.body.appendChild(ball)
      // 添加动画属性
      setTimeout(() => {
        ball.style.top = this.endPoint.y + 'px'
        ball.style.left = this.endPoint.x + 'px'
      }, 0)
      // 动画结束后，删除自己
      ball.ontransitionend = function () {
        this.remove()
      }
    }

.ball{
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcc33;
  transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)
}

step3： 完成大吉~~！你还想会多复杂鸭？

PS：若有侵权，联系必删。