思路

1.确定点击的购物的位置，设置动画开始位置
2.结尾位置是左下角购物车的位置，设置为结束位置
3.配合设置false，来设置动画结束影藏
4.if (el.offsetHeight) {} 用来触发页面重绘

getBoundingClientRect

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
  <div>
    <ul class="good_box">
      <!--  -->
      <li v-for="(item, index) in goosList" :key="index">
        <img src= "'../assets/goods/1.jpg'">
        <div class="good_des">
          <p class="good_title">{{item.title}}</p>
          <p class="good_js">{{item.js}}</p>
          <div class="addGood" @click="addGood($event, item)">
            <i class="iconfont icon-tianjiagouwuche"></i>
          </div>
        </div>
      </li>
    </ul>
    <div class="fix_bar">
      <i class="iconfont icon-tianjiagouwuche1"></i>
      <span class="addGoodListLength">共 {{addGoodList.length}} 件商品</span>
      <transition
        name="ball"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
        <div class="ball" v-if="show"></div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return {
      goosList: [],
      show: false,
      wHeight: document.documentElement.clientHeight || document.body.clientHeight, // 屏幕的高度
      ball: {
        startLeft: '',
        startTop: ''
      },
      addGoodList: []
    }
  },
  created () {
    for (let i = 1; i < 19; i++) {
      let obj = {}
      obj.title = '商品名称' + i
      obj.js = '商品介绍' + i
      this.goosList.push(obj)
    }
  },
  methods: {
    addGood (el, item) {
      this.show = true
      let obj = {
        title: item.title,
        js: item.js
      }
      this.addGoodList.push(obj)
      let rectInfo = el.target.getBoundingClientRect()
      this.ball.startLeft = rectInfo.left
      this.ball.startTop = rectInfo.top
    },
    beforeEnter (el) {
      // let ballRectInfo = el.getBoundingClientRect()
      // console.log(ballRectInfo)
      el.style.left = this.ball.startLeft + 'px'
      el.style.top = -(this.wHeight - 100 - this.ball.startTop) + 'px' // 100 => 底部黑框的高度
    },
    enter (el, done) {
      // 触发动画重绘
      if (el.offsetHeight) {}
      el.style.left = '35px'
      el.style.top = '40px'
      el.style.transition = 'all 1s'
      done()
    },
    afterEnter (el) {
      this.show = false
      // el.style.display = 'none'
    }
  }
}
</script>
<style lang="scss" scoped>
.good_box{
  li {
    display: flex;
    margin-bottom: 20px;
    &:not(::after){
      border-bottom: 1px solid #dddddd;
    }
    img{
      width: 100px;
      height: 100px;
      margin-right: 25px;
    }
    .good_des{
      flex: 1;
      text-align: left;
      .good_title{
        font-size: 16px;
      }
      .good_js{
        font-size: 12px;
        color: #cccccc;
        margin-top: 10px;
      }
      .addGood{
        text-align: right;
        margin-right: 30px;
        .iconfont{
          font-size: 25px;
          color: blue;
          margin-top: 20px;
        }
      }
    }
  }
}
.fix_bar{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #000;
  .icon-tianjiagouwuche1{
    font-size: 50px;
    margin-left: 30px;
    color: #ffffff;
  }
  .addGoodListLength{
    color: #ffffff;
    margin-left: 30px;
  }
  .ball{
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 30px;
    position: absolute;
    top: 35px;
    left: 40px;
    z-index: 10;
  }
}
</style>

完整代码：

https://github.com/xiaosongread/vue-pc-cli

http://localhost:8080/#/test3