如何在Vue.js中将转场与预渲染的next元素一起使用？

Question

我需要什么：两张幻灯片，其中有进入和退出动画的内容

可以通过预加载，过渡和CSS动画轻松完成：

new Vue({
  el: '#app',
  data: {
    n: 1
  },
  methods: {
    image(n) {
      return 'https://lorempixel.com/200/200/cats/' + n
    },
    next() {
      this.n++;
      this.preload(this.n + 2, 1)
      console.log('SHOW', this.n);
    },
    preload(from, num) {
      for (let i = from; i < from + num; i++) {
        console.log('PELOAD', i);
        (new Image()).src = this.image(i)
      }
    }
  },
  mounted() {
    this.preload(this.n, 3)
  }
})

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

.slide {
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
}

.slide-fade-enter-active {
  animation: fly-in .3s;
}

.slide-fade-leave-active {
  animation: slide-out .3s;
  z-index: 999;
}

@keyframes fly-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app" @click="next">
  <transition name="slide-fade">
    <img class="slide" :key="n" :src="image(n)">
  </transition>
</div>

但是，如果设备速度不够快（旧的智能手机），浏览器将延迟显示图像内容。将下一个图像元素预先渲染（显示）到当前图像是很好的选择。是否可以通过Vue.js轻松实现此功能，或者需要手动对其进行动画处理？

UPD。 Here is问题示例