Как переходы работают с изображениями в Vue JS 3?

Question

Мне не удалось применить плавный переход к изображению с помощью Vue JS 3. Переход отлично работает с текстом, но изображение просто загружается и визуализируется, как обычно, без применения перехода.

Я пытался создать загрузчик изображений, который будет показывать счетчик загрузки до тех пор, пока изображение не будет загружено, а затем исчезнет счетчик загрузки и изображение появится после загрузки изображения. В настоящее время индикатор загрузки исчезает, как и ожидалось, но изображение не появляется.

Вот что у меня есть в элементе изображения:

      <script setup>
  import FadeTransition from '../transitions/fade-transition.vue';
  import { reactive } from 'vue'

  const props = defineProps({
    imgUrl: String,
    route: String
  })

  let getURL = function () {
    return new URL(props.imgUrl, import.meta.url);
  }

  let show = reactive({showing: false});
  let showImg = function () {
    show.showing = true;
  }
</script>

<template>
  <div class="frame">
    <FadeTransition><div v-show="!show.showing" class="loader"></div></FadeTransition>
    <RouterLink :to="props.route"><FadeTransition><img v-show="show.showing" class="image" :src="getURL()" @load="showImg()"/></FadeTransition></RouterLink>
  </div>
</template>

<style scoped>
  .frame {
    width: 33.3333%;
    aspect-ratio: 1/1;
    margin: 0px;
    /*inline-block leaves space for descenders (e.g: letter y or g) so space between rows is wrong*/
    display: inline-flex;
    position: relative;
    padding: 6px;
  }

  .image {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    position: absolute;
  }

  .loader {
    border: 4px solid var(--grey);
    border-top: 4px solid var(--darkGrey);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 5s linear infinite;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

и компонент FadeTransition:

      <script>
</script>

<template>
  <Transition name="fade">
    <slot></slot> 
  </Transition>
</template>

<style>
  .fade-enter-active, 
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from, 
  .fade-leave-to {
    opacity: 0;
  }
</style>

Я попытался заменить изображение на текстовый блок, и это работает правильно, что привело меня к выводу, что проблема в том, что переход неправильно применяется к изображению.

Как я могу заставить переход правильно применяться к изображению?

Answer 1

Хм, все, что я могу вам сказать, это то, что он отлично работает на детской площадке .

ЕслиimgUrlявляется опорой, я бы добавил наблюдателя, который сбрасывает компонент при изменении URL-адреса:

      watch(
  () => props.imgUrl,
  () => {
    show.showing = false
  },
  {immediate: true}
)

В противном случае анимация загрузки и затухание не будут запускаться при изменении URL-адреса после первоначальной загрузки.

В остальном выглядит совершенно нормально.

Пожалуйста, дайте мне знать, если я что-то упускаю.