App.vue

<template>
  <div id="app">
    <header>
      <h1>Buy this</h1>
      <div class="cart" ref="cart">Cart</div>
    </header>

    <main>
      <div class="item">
          <h2>Item01</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item01"><a href="#" @click="doFly('item01')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item02</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item02"><a href="#" @click="doFly('item02')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item03</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item03"><a href="#" @click="doFly('item03')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item04</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item04"><a href="#" @click="doFly('item04')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item05</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item05"><a href="#" @click="doFly('item05')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item06</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item06"><a href="#" @click="doFly('item06')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item07</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item07"><a href="#" @click="doFly('item07')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item08</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item08"><a href="#" @click="doFly('item08')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item09</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item09"><a href="#" @click="doFly('item09')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item10</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item10"><a href="#" @click="doFly('item10')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item11</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item11"><a href="#" @click="doFly('item11')">Add to cart</a>
      </div>
      <div class="item">
          <h2>Item12</h2>
          <img src="https://picsum.photos/150/150" alt="" ref="item12"><a href="#" @click="doFly('item12')">Add to cart</a>
      </div>
      <transition name="fly"
        @before-enter="beforeEnter"
        @enter="enter"
        appear>
        <img :src="flyingImageSrc" class="fly" v-if="showFlyingImage">
      </transition>
    </main>

  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      flyingImageSrc: '',
      showFlyingImage: false,
      itemImageOffsetLeft: 0,
      itemImageOffsetTop: 0,
      deltaX: 0,
      deltaY: 0,
      isMounted: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.top = this.itemImageOffsetTop + 'px'
      el.style.left = this.itemImageOffsetLeft + 'px'
      el.style.opacity = '0'
    },
    enter(el, done) {
      el.style.transform = `translate(${this.deltaX}px, ${this.deltaY}px)`
      el.style.opacity = '.5'
      el.style.transition = 'all 1s'
      done()
    },
    readRefs() {
      // console.log(this.$refs)
    },
    doFly(ref) {
      // get the image src (passed in)
      this.flyingImageSrc = this.$refs[ref].src
      // turn on showing the image
      this.showFlyingImage = true
      // turn off showing the image
      setTimeout(() => {
        this.showFlyingImage = false
      }, 1000)
      // get image offset
      this.itemImageOffsetLeft = this.$refs[ref].offsetLeft
      this.itemImageOffsetTop = this.$refs[ref].offsetTop
      this.deltaY = this.cartOffsetTop - this.itemImageOffsetTop
      this.deltaX = this.cartOffsetLeft - this.itemImageOffsetLeft
    }
  },
  computed: {
    cartOffsetLeft() {
      if (!this.isMounted) {
        return
      }
      return this.$refs.cart.offsetLeft
    },
    cartOffsetTop() {
      if (!this.isMounted) {
        return
      }
      return this.$refs.cart.offsetTop
    }
  },
  mounted() {
    this.isMounted = true
  }
}
</script>

<style>
body {
  height: 100vh;
  padding: 1rem;
  width: 60%;
  margin: 0 auto;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
}
main {
  display: flex;
  flex: 0;
  flex-wrap: wrap;
}
.item {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.fly {
  position: fixed;
  transform: scale(.5);
  opacity: .5;
  border: 1px solid hotpink;
}
.left {
  width: 100px;
  height: 100px;
  background-color: #000;
  left: 100px;
}
</style>