From f2914a1bd010ec39c57465e00fa9562ceba2d6be Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sun, 7 May 2023 10:00:47 +0000 Subject: [PATCH] wip --- .../src/components/MkGalleryPostPreview.vue | 15 +++++------ .../src/components/MkImgWithBlurhash.vue | 27 ++++++------------- 2 files changed, 14 insertions(+), 28 deletions(-) diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue index 4f8f7b945a..d694dcce35 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.vue +++ b/packages/frontend/src/components/MkGalleryPostPreview.vue @@ -5,6 +5,7 @@ <ImgWithBlurhash class="img layered" :transition="safe ? null : { + duration: 500, enterActiveClass: $style.transition_toggle_enterActive, leaveActiveClass: $style.transition_toggle_leaveActive, enterFromClass: $style.transition_toggle_enterFrom, @@ -55,10 +56,7 @@ function leaveHover(): void { <style lang="scss" module> .transition_toggle_enterActive, .transition_toggle_leaveActive { - transition: opacity 0.5s; - position: absolute; - top: 0; - left: 0; + transition: opacity .5s; } .transition_toggle_enterFrom, @@ -66,11 +64,10 @@ function leaveHover(): void { opacity: 0; } -.transition_toggle_enterTo, -.transition_toggle_leaveFrom { - transition: none; - opacity: 1; -} +//.transition_toggle_enterTo, +//.transition_toggle_leaveFrom { +// opacity: 1; +//} </style> <style lang="scss" scoped> diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 4301d79a75..f521fa64c4 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -1,17 +1,16 @@ <template> <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''"> - <img v-if="!loaded && src" :class="$style.loader" :src="src" loading="eager" @load="onLoad"/> + <canvas ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> <Transition - mode="in-out" + :duration="defaultStore.state.animation && props.transition?.duration || undefined" :enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || undefined" - :leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || undefined" + :leave-active-class="defaultStore.state.animation && props.transition?.leaveActiveClass || undefined" :enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined" :leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined" :enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined" :leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined" > - <canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> - <img v-else :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/> + <img v-show="loaded && !forceBlurhash" :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/> </Transition> </div> </template> @@ -27,6 +26,7 @@ const $style = useCssModule(); const props = withDefaults(defineProps<{ transition?: { + duration?: number | { enter: number; leave: number; }; enterActiveClass?: string; leaveActiveClass?: string; enterFromClass?: string; @@ -116,20 +116,6 @@ onUnmounted(() => { </script> <style lang="scss" module> -.transition_toggle_leaveActive { - position: absolute; - top: 0; - left: 0; -} - -.loader { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; -} - .root { position: relative; width: 100%; @@ -156,5 +142,8 @@ onUnmounted(() => { .img { object-fit: contain; + position: absolute; + top: 0; + left: 0; } </style>