vue实现加入购物车飞入动画

<template>
  <div class="shop_cart">
    <div class="add">
      <button @click="addShopCart">add</button>
      <transition name="shop_cart">
        <img class="add_img" v-if="addShow" src="./assets/logo.png" alt="" />
      </transition>
    </div>
    <div class="cart">
      <img src="./assets/bg.jpg" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  name: "myTransition",
  components: {},
  data() {
    return {
      addShow: false,
    };
  },
  methods: {
    addShopCart() {
      this.addShow = true;
      setTimeout(() => {
        this.addShow = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less">
.shop_cart {
  .add {
    position: relative;
    button{
      position: absolute;
    }
  }
  .cart img {
    width: 50px;
    height: 50px;
    margin-top: 800px;
    position: absolute;
  }

  .add_img {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 1211px;
  }
}
.shop_cart-enter-active {
  transition: all 2s ease-out;
}
.shop_cart-enter {
  transform: translate(0px, -1211px);
}
</style>