Commit a19bbce

HPCesia <me@hpcesia.com>
2025-02-06 11:44:10
feat: transition name for aside cards
1 parent 7266698
Changed files (3)
src/components/widgets/ProfileCard.astro
@@ -5,7 +5,7 @@ import { Icon } from 'astro-icon/components';
 import Button from './Button.astro';
 ---
 
-<div id="profile-card" transition:persist class="card card-bordered border-2">
+<div id="profile-card" transition:name="profile-card" class="card card-bordered border-2">
   <figure class="px-4 pt-4">
     <a href="/about/">
       <ImageWrapper class="rounded-xl" src={profileConfig.avatar} alt={profileConfig.name} />
src/components/widgets/TOC.astro
@@ -11,7 +11,11 @@ const minDepth = Math.min(...headings.map((h) => h.depth));
 const maxLevel = 3;
 ---
 
-<div id="toc" class:list={['card card-bordered border-2', className]}>
+<div
+  id="toc"
+  class:list={['card card-bordered border-2 bg-base-100', className]}
+  transition:name="toc-card"
+>
   <div class="card-body p-2">
     {
       headings
src/components/SideToolBar.astro
@@ -79,8 +79,14 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 
     const toc = document.getElementById('toc');
     if (toc && stbTocWrapper) {
+      const remainAttrs = ['class', 'style'];
       stbTocWrapper.appendChild(toc.cloneNode(true));
       stbTocWrapper.children[0].id = 'stb-toc-content';
+      Array.from(stbTocWrapper.children[0].attributes).forEach((attr) => {
+        if (!remainAttrs.includes(attr.name)) {
+          stbTocWrapper.children[0].removeAttribute(attr.name);
+        }
+      });
       stbToc?.classList.remove('hidden');
       stbTocWrapper.classList.remove('hidden');
     }