mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-04-18 21:29:18 +08:00
42608f50c1
- Replaced `vue-virtual-scroll-list` with `@tanstack/vue-virtual` in package.json for enhanced virtual scrolling capabilities. - Refactored multiple components to utilize CSS transitions instead of JavaScript animations, improving performance and simplifying code. - Updated transition classes in `AnimatedBackground.vue`, `CommentsModal.vue`, `KeyboardHelpPanel.vue`, `SettingsModal.vue`, `VndbPanel.vue`, and others for a more cohesive user experience. - Removed unnecessary animation functions and streamlined component structures for better maintainability.
27 lines
664 B
Vue
27 lines
664 B
Vue
<template>
|
|
<Transition
|
|
enter-active-class="duration-[1500ms] ease-in-out"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="duration-[1500ms] ease-in-out"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<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">
|
|
defineProps<{
|
|
imageUrl: string
|
|
imageKey: string | number
|
|
kenBurnsClass: string
|
|
}>()
|
|
</script>
|