Vue.js로 그림을 전환할 수 없습니다

Vue.js의transition를 사용하면 페이드 아웃과 함께 슬라이드 쇼를 간단하게 제작할 수 있습니다.

<div id="app">
  <transition name="fade">
    <img :src="images[index]" :key="images[index]" width="320" height="213" class="slideshow">
  </transition>
</div>

new Vue({
  el: "#app",
  data: {
    index: 0,
    images: [
      'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Lagopus_muta_japonica_Mount_Tsubakuro.jpg/320px-Lagopus_muta_japonica_Mount_Tsubakuro.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Pair_of_mandarin_ducks.jpg/320px-Pair_of_mandarin_ducks.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg/320px-Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg',
    ]
  },
  mounted() {
    setInterval(() => {
        this.index = this.index < this.images.length - 1 ? this.index + 1 : 0;
    }, 3000);
  },
})

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.slideshow {
  position: absolute;
}

이 코드는 https://jsfiddle.net/76xkzqmg/1/ 에서 동작을 확인할 수 있습니다.
동적으로img원소의 src를 다시 쓰는 것은transition으로 하여금 언뜻 보기에는 간단하고 좋은 실현이다.하지만 이 코드에 큰 문제가 있습니다!
Chrome의 DevTools를 열고 네트워크 탭을 봅니다.이렇게 하면 그림을 전환할 때마다 그림을 다운로드합니다.

슬라이드 쇼에 사용된 이미지가 1장 1MB인 경우 5초에 한 번씩 전환하면 1분 12MB, 1시간 720MB가 다운로드됩니다.
또한 이 다운로드는 PC 버전의 Chrome의 경우 탭이 활성화되지 않을 때도 발생합니다.종량요금제의 노선을 사용할 때, 만약 계속 그런 페이지를 열면
따라서 무한 다운로드가 발생하지 않도록 대책을 강구하겠습니다.

transition의 구조와img 요소

Vue.js의transition은 연결을 통해 요소를 추가하고 삭제하여 애니메이션을 진행합니다.따라서 src 속성을 다시 써야 할 뿐만 아니라img 요소 자체를 DOM에서 삭제하고 다시 추가해야 합니다.이를 위해 예시 코드 사용 key 속성을 사용합니다.
다른 한편, img 요소를 새로 추가하면 src 속성에서 지정한 URL에서 그림을 가져옵니다.
이 두 기능의 결합은 무한 다운로드를 초래했다.
transition을 사용하지 않고 실시하는 방침을 고려하는 것이 좋다.

CSS 애니메이션 슬라이드 쇼

Vue의transition을 사용하지 않더라도 JavaScript와 CSS 애니메이션의 조합을 통해 슬라이드 쇼를 볼 수 있습니다.

<div id="app">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Lagopus_muta_japonica_Mount_Tsubakuro.jpg/320px-Lagopus_muta_japonica_Mount_Tsubakuro.jpg" class="slideshow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Pair_of_mandarin_ducks.jpg/320px-Pair_of_mandarin_ducks.jpg" class="slideshow fadeout">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg/320px-Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg" class="slideshow fadeout">
</div>

new Vue({
  el: "#app",
  data: {
    index: 0,
  },
  mounted() {
    const images = document.getElementsByClassName('slideshow');
    this.slideshow(images);
    setInterval(() => {
      this.index = this.index < images.length - 1 ? this.index + 1 : 0;
      this.slideshow(images);
    }, 3000);
  },
  methods: {
    slideshow(images) {
      const current = images[this.index];
      const prev = images[this.index - 1] ? images[this.index - 1] : images[images.length - 1];
      current.classList.add('fadein');
      current.classList.remove('fadeout');
      prev.classList.remove('fadein');
      prev.classList.add('fadeout');
    }
  }
})

.fadein {
  opacity: 1;
  transition: opacity 0.5s;
}

.fadeout {
  opacity: 0;
  transition: opacity 0.5s;
}

.slideshow {
  position: absolute;
}

동작 확인https://jsfiddle.net/tjn4h6yz/.
슬라이드쇼 방법에서 새로 표시된 요소(current)에fadein 클래스를 추가하고, 지금까지 표시된 요소(prev)에fadeout 클래스를 추가합니다.여기서, Vue.js의transition과 마찬가지로 애니메이션을 추가할 수 있습니다.
또한 이 구현에서img 요소를 추가하거나 삭제하지 않았기 때문에 그림을 무제한으로 다운로드할 수 없습니다.