zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat(ui): smoothly unblurring picture placeholders (#1026) 

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
resolves https://github.com/elk-zone/elk/issues/1022
zio/stable
Diu 2023-01-13 14:19:46 +08:00 committed by GitHub
parent 5e940e58cb
commit 6cb3183c2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/common/CommonBlurhash.vue
View File

@ -38,6 +38,19 @@ onMounted(() => {
</script> </script>
<template> <template>
<img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset"> <Transition>
<img v-else v-bind="$attrs" :src="placeholderSrc"> <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset" absolute>
<img v-else v-bind="$attrs" :src="placeholderSrc" absolute>
</Transition>
<img v-bind="$attrs" :src="placeholderSrc" z-0 aria-hidden>
</template> </template>
<style>
.v-enter-active {
transition: opacity 0.3s ease;
}
.v-enter-from {
opacity: 0;
}
</style>