アニメーション(#139) #252
@@ -20,14 +20,12 @@ export default (({ posts, onClick }: Props) => {
|
||||
|
||||
const cardRef = useRef<HTMLDivElement> (null)
|
||||
|
||||
const outboundSharedId = useSharedTransitionStore (s => s.byLocationKey[location.key])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-wrap gap-6 p-4">
|
||||
{posts.map ((post, i) => {
|
||||
const id2 = `page-${ post.id }`
|
||||
const layoutId = outboundSharedId === id2 ? id2 : undefined
|
||||
const layoutId = id2
|
||||
|
||||
return (
|
||||
<PrefetchLink
|
||||
|
||||
@@ -113,9 +113,11 @@ export default (({ user }: Props) => {
|
||||
{inboundSharedId === `page-${ id }` && (
|
||||
<motion.div
|
||||
layoutId={inboundSharedId}
|
||||
className="absolute top-4 left-4 w-[640px] max-w-full h-[360px]
|
||||
overflow-hidden rounded-xl shadow pointer-events-none
|
||||
opacity-0 z-10">
|
||||
className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
|
||||
overflow-hidden rounded-xl pointer-events-none z-50"
|
||||
initial={{ opacity: 1 }}
|
||||
animate={{ opacity: 0 }}
|
||||
transition={{ duration: .2, ease: 'easeOut' }}>
|
||||
<img src={post.thumbnail || post.thumbnailBase || undefined}
|
||||
alt={post.title || post.url}
|
||||
title={post.title || post.url || undefined}
|
||||
|
||||
新しい課題から参照
ユーザをブロックする