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
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>

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

@ -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>