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

嗯，我只能告诉你，它似乎在 playground

中完美运行

如果

imgUrl

是一个道具，我会添加一个观察者，当 URL 更改时重置组件。其余的看起来非常好。

如果我遗漏了什么，请告诉我。