我一直无法使用Vue JS 3将淡入淡出应用到图像上.过渡对文本效果很好,但图像只是加载和渲染,就像正常情况下没有应用过渡一样.
我一直在try 创建一个图像加载器,它将显示一个加载微调,直到图像加载,然后淡出加载微调,一旦图像加载图像.当前加载微调按预期淡出,但图像不淡入.
下面是我在图像元素中拥有的内容:
<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>
我已经try 将图像交换为文本块,它工作正常,这使我得出结论,我遇到的问题是没有正确地将过渡应用于图像.
如何才能将过渡正确应用于图像?