JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <p>
    What's going on is that we show an image, one second later change its `src` but the original image does not go away until the new image is loaded. Notice how "replaced" appears while the old image is still there.
  </p>
  <p>
    {{ status }}
  </p>
  <button @click="change">
    Toggle
  </button>
  <img :src="url" :key="url" />
</div>

CSS

img {
  width: 100px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    status: 'starting',
    url: 'http://imgur.com/hNSHGtB.jpg'
  },
  methods: {
  	change: function () {
      this.url = "http://imgur.com/O8KeEjx.jpg"
    }
  }
});