mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-04-14 20:53:36 +08:00
e8349e4131
* 在 `eslint.config.js` 中添加多个只读全局变量，增强代码的可读性和一致性。 * 在多个组件中调整代码风格，确保条件语句使用大括号包裹，提高代码的可维护性。 * 优化 `AnimatedBackground.vue`、`CommentsModal.vue`、`SearchHeader.vue`、`SettingsModal.vue`、`StatsCorner.vue`、`VndbPanel.vue`、`useAnime.ts`、`useFancybox.ts`、`useProgress.ts`、`useTextScroll.ts` 和 `useWindowManager.ts` 中的逻辑，提升代码质量和一致性。
44 lines
877 B
Vue
44 lines
877 B
Vue
<template>
|
|
<Transition
|
|
:css="false"
|
|
@enter="onEnter"
|
|
@leave="onLeave"
|
|
>
|
|
<div
|
|
v-if="imageUrl"
|
|
:key="imageKey"
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat will-change-transform gpu-layer"
|
|
:class="kenBurnsClass"
|
|
:style="{ backgroundImage: `url(${imageUrl})` }"
|
|
/>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { animate } from '@/composables/useAnime'
|
|
|
|
defineProps<{
|
|
imageUrl: string
|
|
imageKey: string | number
|
|
kenBurnsClass: string
|
|
}>()
|
|
|
|
function onEnter(el: Element, done: () => void) {
|
|
animate(el as HTMLElement, {
|
|
opacity: [0, 1],
|
|
duration: 1500,
|
|
ease: 'inOutQuad',
|
|
complete: done,
|
|
})
|
|
}
|
|
|
|
function onLeave(el: Element, done: () => void) {
|
|
animate(el as HTMLElement, {
|
|
opacity: [1, 0],
|
|
duration: 1500,
|
|
ease: 'inOutQuad',
|
|
complete: done,
|
|
})
|
|
}
|
|
</script>
|