diff options
Diffstat (limited to 'packages/frontend/src/components/MkGalleryPostPreview.vue')
| -rw-r--r-- | packages/frontend/src/components/MkGalleryPostPreview.vue | 52 |
1 files changed, 38 insertions, 14 deletions
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue index 944f5ad97b..4f8f7b945a 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.vue +++ b/packages/frontend/src/components/MkGalleryPostPreview.vue @@ -1,9 +1,21 @@ <template> <MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover"> <div class="thumbnail"> - <ImgWithBlurhash class="img" :hash="post.files[0].blurhash"/> <Transition> - <ImgWithBlurhash v-if="show" class="img layered" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/> + <ImgWithBlurhash + class="img layered" + :transition="safe ? null : { + enterActiveClass: $style.transition_toggle_enterActive, + leaveActiveClass: $style.transition_toggle_leaveActive, + enterFromClass: $style.transition_toggle_enterFrom, + leaveToClass: $style.transition_toggle_leaveTo, + enterToClass: $style.transition_toggle_enterTo, + leaveFromClass: $style.transition_toggle_leaveFrom, + }" + :src="post.files[0].thumbnailUrl" + :hash="post.files[0].blurhash" + :force-blurhash="!show" + /> </Transition> </div> <article> @@ -28,7 +40,8 @@ const props = defineProps<{ }>(); const hover = ref(false); -const show = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive || hover.value); +const safe = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive); +const show = computed(() => safe.value || hover.value); function enterHover(): void { hover.value = true; @@ -39,6 +52,27 @@ function leaveHover(): void { } </script> +<style lang="scss" module> +.transition_toggle_enterActive, +.transition_toggle_leaveActive { + transition: opacity 0.5s; + position: absolute; + top: 0; + left: 0; +} + +.transition_toggle_enterFrom, +.transition_toggle_leaveTo { + opacity: 0; +} + +.transition_toggle_enterTo, +.transition_toggle_leaveFrom { + transition: none; + opacity: 1; +} +</style> + <style lang="scss" scoped> .ttasepnz { display: block; @@ -66,7 +100,7 @@ function leaveHover(): void { width: 100%; height: 100%; position: absolute; - transition: all 0.5s ease; + transition: transform 0.5s ease; > .img { width: 100%; @@ -76,16 +110,6 @@ function leaveHover(): void { &.layered { position: absolute; top: 0; - - &.v-enter-active, - &.v-leave-active { - transition: opacity 0.5s ease; - } - - &.v-enter-from, - &.v-leave-to { - opacity: 0; - } } } } |