usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
tamaina 2023-05-07 10:00:47 +00:00
parent 5a4a7f3d08
commit f2914a1bd0
2 changed files with 14 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/frontend/src/components/MkGalleryPostPreview.vue
View File

@ -5,6 +5,7 @@
<ImgWithBlurhash <ImgWithBlurhash
class="img layered" class="img layered"
:transition="safe ? null : { :transition="safe ? null : {
duration: 500,
enterActiveClass: $style.transition_toggle_enterActive, enterActiveClass: $style.transition_toggle_enterActive,
leaveActiveClass: $style.transition_toggle_leaveActive, leaveActiveClass: $style.transition_toggle_leaveActive,
enterFromClass: $style.transition_toggle_enterFrom, enterFromClass: $style.transition_toggle_enterFrom,
@ -55,10 +56,7 @@ function leaveHover(): void {
<style lang="scss" module> <style lang="scss" module>
.transition_toggle_enterActive, .transition_toggle_enterActive,
.transition_toggle_leaveActive { .transition_toggle_leaveActive {
transition: opacity 0.5s; transition: opacity .5s;
position: absolute;
top: 0;
left: 0;
} }
.transition_toggle_enterFrom, .transition_toggle_enterFrom,
@ -66,11 +64,10 @@ function leaveHover(): void {
opacity: 0; opacity: 0;
} }
.transition_toggle_enterTo, //.transition_toggle_enterTo,
.transition_toggle_leaveFrom { //.transition_toggle_leaveFrom {
transition: none; // opacity: 1;
opacity: 1; //}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>

27
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -1,17 +1,16 @@
<template> <template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''"> <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 <Transition
mode="in-out" :duration="defaultStore.state.animation && props.transition?.duration || undefined"
:enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || 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" :enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
:leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined" :leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
:enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined" :enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined"
:leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || 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-show="loaded && !forceBlurhash" :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/>
<img v-else :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
</Transition> </Transition>
</div> </div>
</template> </template>
@ -27,6 +26,7 @@ const $style = useCssModule();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
transition?: { transition?: {
duration?: number | { enter: number; leave: number; };
enterActiveClass?: string; enterActiveClass?: string;
leaveActiveClass?: string; leaveActiveClass?: string;
enterFromClass?: string; enterFromClass?: string;
@ -116,20 +116,6 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" module> <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 { .root {
position: relative; position: relative;
width: 100%; width: 100%;
@ -156,5 +142,8 @@ onUnmounted(() => {
.img { .img {
object-fit: contain; object-fit: contain;
position: absolute;
top: 0;
left: 0;
} }
</style> </style>