mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat(ui): smoothly unblurring picture placeholders (#1026)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe> resolves https://github.com/elk-zone/elk/issues/1022
This commit is contained in:
parent
5e940e58cb
commit
6cb3183c2e
1 changed files with 15 additions and 2 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue