javascript - 如何使图像变化平滑过渡？

Question

请帮我通过Js顺利换图。有一个带有图片链接的数组，我对其进行迭代，每隔几秒钟我就更改图片。图片变化非常剧烈，但我需要这种图片变化的过渡是流畅的动画吗？

  setInterval(() => {
    document.getElementById('image').src = '...';
  }, 5000);

UPD

new Vue({
  el: "#app",
  data: {
    count: 0,
    mass: ["https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300", ]
  },
  mounted() {

    for (let i = 0; i < this.mass.length; i++) {
      setTimeout(() => {
        document.getElementById('image').src = this.mass[i]
      }, 1000);
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img src="https://picsum.photos/id/237/200/300" id="image" />
</div>

Answer 1

new Vue({
      el: "#app",
      data: {
        count: 0,
        mass: ["https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300", ]
      },
      mounted() {

          let i=0;
          setInterval(() => {
          i = (i+1) % this.mass.length;
           fadeIn(document.getElementById('image'), 1000); 
            document.getElementById('image').src = this.mass[i];    
          }, 4000);
      },
    })
    
    
function fadeIn(el, time) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / time;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
    <transition name="fade">
      <img src="https://picsum.photos/id/237/200/300" id="image" />
      </transition>
    </div>