vue加入购物车动效

早几年的淘宝、京东pc端有类似的加入动效，现如今淘宝的购物车变成了Drawer 抽屉式

但也有其他的网址有要购物车的需求

<template>

   <div class="box">
      <!-- 资源列表 -->
      <ul>
        <li>
          <img src="../images/t.png" alt="">
          <p>这是标签<p/>
          <div class="btn-box">
            <el-button type=“primary”>申请</el-button>
            <el-button type=“primary” ref="ceshi" @click=“joinHandle”>加入购物车</el-button>
          </div>
        </li>
      </ul>
      <!-- 这是购物车 -->
      <div class="shopping">
        <div class="shopp-header">
          <img src="../images/shooping_car.png" alt="">
        </div>
      </div>
      <transition @before-enter=“beforeEnter” @center=“enter” @after-enter=“afterEnter”>
        <img v-if="addShow" src="../images/shopping.png" class="img_js" alt="">
      </transition>
   </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      addShow: false, //一开始加入购物车图标隐藏
      startTop:0,  //一开始加入购物车的显示的位置
      startLeft:0,
    };
  },
  methods: {
    joinHandle(idx) { 
      //获取当前点击的位置 也就是一开始加入购物车动画开始的位置
      this.startTop = this.$refs.ceshi[idx].getBoundingClientRect().top
      this.startLeft =  this.$refs.ceshi[idx].getBoundingClientRect().left
      this.addShow = true //加入购物车图标显示
    },
    // 动画钩子函数
    // 进入前的状态
    beforeEnter(el) {
      el.style.left = this.startLeft + 'px';
      el.style.top = this.startTop + 'px'
      el.style.transform = 'scale(1)'
    },
    // 进入中
    enter(el) {
      // 需要调用元素的offset操作，才有过渡效果，否则会马上执行
      el.offsetWidth
      // 购物车的位置
      const sizeTop = `${document.documentElement.clientHeight / 2}`
      const sizeLeft = `${document.documentElement.clienWidth - 160}` //160 是我给购物车的宽度
      el.style.left = sizeLeftt + 'px';
      el.style.top = sizeTopp + 'px'
      el.style.transform = 'scale(0.5)'
      done()
    }
    // 进入后
    afterEnter() {
      this.addShow = false
    }
  },
};
</script>

<style scoped>
.shopping {
  width:160px;
   position: fixed;
  right:0;
  top:50%;
  transform:translateY(-50%)
}
.img_js {
  width:20px;
  position: fixed;
  left:0;
  top:0;
  transition: all 1s;

}
</style>

原文章：vue-transition实现加入购物车效果及其他动画效果实现 - 潇湘羽西 - 博客园