diff options
| author | tamaina <tamaina@hotmail.co.jp> | 2023-04-28 16:39:04 +0000 |
|---|---|---|
| committer | tamaina <tamaina@hotmail.co.jp> | 2023-04-29 14:01:25 +0000 |
| commit | 87657d0acfabedc20181edf3e04de368c9dd2613 (patch) | |
| tree | 7b2de01e48cc6dcae60957e275a0e094e6e0e1e5 /packages | |
| parent | feat: make `MkImgWithBlurhash` transitionable (#10500) (diff) | |
| download | misskey-87657d0acfabedc20181edf3e04de368c9dd2613.tar.gz misskey-87657d0acfabedc20181edf3e04de368c9dd2613.tar.bz2 misskey-87657d0acfabedc20181edf3e04de368c9dd2613.zip | |
wip
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/components/MkImgWithBlurhash.vue | 11 |
1 files changed, 8 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 2bdb059614..6406a35060 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -7,10 +7,10 @@ :leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || 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" + :enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined" + :leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined" > - <canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="width" :height="height" :title="title"/> + <canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="width" :height="height" :title="title ?? undefined"/> <img v-else :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/> </Transition> </div> @@ -99,6 +99,11 @@ onMounted(() => { left: 0; } +.transition_toggle_enterTo, +.transition_toggle_leaveFrom { + opacity: 0; +} + .loader { position: absolute; top: 0; |