アニメーション(#139) #252

マージ済み
みてるぞ が 16 個のコミットを feature/139 から main へマージ 2026-02-05 23:25:28 +09:00
2個のファイルの変更23行の追加23行の削除
コミット 9004ffb330 の変更だけを表示してゐます - すべてのコミットを表示
+4 -9
ファイルの表示
@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { useLocation, useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import PostEditForm from '@/components/PostEditForm' import PostEditForm from '@/components/PostEditForm'
import PostEmbed from '@/components/PostEmbed' import PostEmbed from '@/components/PostEmbed'
@@ -31,11 +31,6 @@ export default (({ user }: Props) => {
const postId = String (id ?? '') const postId = String (id ?? '')
const postKey = postsKeys.show (postId) const postKey = postsKeys.show (postId)
const location = useLocation ()
const navState = (location.state ?? { }) as { sharedId?: string }
const inboundSharedId = navState.sharedId
const { data: post, isError: errorFlg, error } = useQuery ({ const { data: post, isError: errorFlg, error } = useQuery ({
enabled: Boolean (id), enabled: Boolean (id),
queryKey: postKey, queryKey: postKey,
@@ -112,15 +107,15 @@ export default (({ user }: Props) => {
{post {post
? ( ? (
<> <>
{inboundSharedId === `page-${ id }` && ( {(post.thumbnail || post.thumbnailBase) && (
<motion.div <motion.div
layoutId={inboundSharedId} layoutId={`page-${ id }`}
className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px] className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
overflow-hidden rounded-xl pointer-events-none z-50" overflow-hidden rounded-xl pointer-events-none z-50"
initial={{ opacity: 1 }} initial={{ opacity: 1 }}
animate={{ opacity: 0 }} animate={{ opacity: 0 }}
transition={{ duration: .2, ease: 'easeOut' }}> transition={{ duration: .2, ease: 'easeOut' }}>
<img src={post.thumbnail || post.thumbnailBase || undefined} <img src={post.thumbnail || post.thumbnailBase}
alt={post.title || post.url} alt={post.title || post.url}
title={post.title || post.url || undefined} title={post.title || post.url || undefined}
className="object-cover w-full h-full"/> className="object-cover w-full h-full"/>
+10 -5
ファイルの表示
@@ -15,10 +15,12 @@ import { fetchPosts } from '@/lib/posts'
import { postsKeys } from '@/lib/queryKeys' import { postsKeys } from '@/lib/queryKeys'
import { fetchWikiPageByTitle } from '@/lib/wiki' import { fetchWikiPageByTitle } from '@/lib/wiki'
import type { FC } from 'react'
import type { WikiPage } from '@/types' import type { WikiPage } from '@/types'
export default () => { export default (() => {
const containerRef = useRef<HTMLDivElement | null> (null) const containerRef = useRef<HTMLDivElement | null> (null)
const [wikiPage, setWikiPage] = useState<WikiPage | null> (null) const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -41,9 +43,13 @@ export default () => {
const totalPages = data ? Math.ceil (data.count / limit) : 0 const totalPages = data ? Math.ceil (data.count / limit) : 0
useLayoutEffect (() => { useLayoutEffect (() => {
scroll (0, 0)
setWikiPage (null) setWikiPage (null)
if (tags.length === 1)
{ if (tags.length !== 1)
return
void (async () => { void (async () => {
try try
{ {
@@ -55,7 +61,6 @@ export default () => {
; ;
} }
}) () }) ()
}
}, [location.search]) }, [location.search])
return ( return (
@@ -100,4 +105,4 @@ export default () => {
</TabGroup> </TabGroup>
</MainArea> </MainArea>
</div>) </div>)
} }) satisfies FC