improve page transitions for blog entries

src/pages/blog/[slug].astro

@@ -31,7 +31,7 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
   <header>
     <p>{publishDate} ~ {readTime}</p>
-    <h1>{title}</h1>
+    <h1 style={`view-transition-name: blog-post-${slug}`}>{title}</h1>
     <div class="tags" style="justify-content: center">
       {tags.map(item => (
           <span class="tag">{item}</span>
@@ -55,7 +55,6 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
     margin-bottom: 0.7em;
     display: flex;
     justify-content: center;
-    view-transition-name: blog-title;
     width: fit-content;
     margin-inline: auto;
   }

src/pages/blog/index.astro

@@ -21,7 +21,7 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
           { index !== 0 && <hr /> }
           <div class="post-item">
             <h2>
-              <a data-astro-prefetch href={href}>{post.data.title}</a>
+              <a data-astro-prefetch href={href} style={`view-transition-name: blog-post-${post.slug}`}>{post.data.title}</a>
             </h2>
             <div class="tags">
               {post.data.tags.map(item => (

src/pages/index.astro

@@ -49,7 +49,7 @@ const latestBlogPost = await getCollection("posts")
           ) : null
         }
         <div class="latest-article">
-          <span class="title">{latestBlogPost?.data.title}</span>
+          <span class="title" style={`view-transition-name: blog-post-${latestBlogPost?.slug}`}>{latestBlogPost?.data.title}</span>
           <span class="excerpt">{latestBlogPost?.data.description}</span>
         </div>
         <div class="actions">
@@ -178,7 +178,6 @@ const latestBlogPost = await getCollection("posts")
       .title {
         font-weight: 600;
         font-size: 1.1rem;
-        view-transition-name: blog-title;
       }
 
       .excerpt {