优化图片放大圆角过渡效果

- 使用 clip-path 实现放大图圆角，避免 scale 动画影响
- 动画期间移除圆角，结束后平滑过渡恢复
- 使用 CSS 变量 --img-radius 统一管理圆角值

Author: tw93

src/components/ClientScripts.astro

@@ -96,17 +96,34 @@
       bgClickAction: 'close',
       bgOpacity: 0.8,
       padding: { top: 20, bottom: 20, left: 20, right: 20 },
+      showHideAnimationType: 'zoom',
+      showAnimationDuration: 300,
+      hideAnimationDuration: 300,
     });
 
-    // Parse data from image tags
-    lightbox.on('uiRegister', function () {
-      const pswp = lightbox.pswp;
+    // Smooth border-radius transition: remove during animation, restore after
+    let currentThumb: HTMLElement | null = null;
 
-      // Add class after zoom animation to handle border radius
-      // We check if pswp exists (it should inside uiRegister, but safe-check doesn't hurt)
-      if (pswp) {
-      }
+    lightbox.on('openingAnimationStart', () => {
+      currentThumb = lightbox.pswp?.currSlide?.data?.element as HTMLElement;
+      currentThumb?.classList.add('pswp-animating');
+    });
+
+    lightbox.on('openingAnimationEnd', () => {
+      document.querySelector('.pswp')?.classList.add('pswp--anim-complete');
+    });
 
+    lightbox.on('closingAnimationStart', () => {
+      document.querySelector('.pswp')?.classList.remove('pswp--anim-complete');
+    });
+
+    lightbox.on('closingAnimationEnd', () => {
+      currentThumb?.classList.remove('pswp-animating');
+      currentThumb = null;
+    });
+
+    // Parse data from image tags
+    lightbox.on('uiRegister', function () {
       lightbox.pswp.ui.registerElement({
         name: 'custom-caption',
         order: 9,

src/styles/markdown.css

@@ -16,7 +16,12 @@ body {
   height: auto;
   object-fit: cover;
   background-color: #f3f4f6;
-  border-radius: 4px;
+  border-radius: var(--img-radius, 8px);
+}
+
+/* Remove border-radius during PhotoSwipe zoom animation */
+.heti img.pswp-animating {
+  border-radius: 0 !important;
 }
 
 .logo img,
@@ -1186,14 +1191,17 @@ img[loading="lazy"] {
   display: none !important;
 }
 
-/* Default: Sharp for clean zoom */
+/* PhotoSwipe: smooth border-radius transition using clip-path (unaffected by scale) */
 .pswp__img,
 .pswp__content > img,
-.pswp__zoom-wrap img {
+.pswp__zoom-wrap img,
+.pswp__img--placeholder {
   object-fit: contain;
-  border-radius: 0 !important;
+  border-radius: 0;
+  clip-path: inset(0 round 0);
+  transition: clip-path 0.25s ease-out;
 }
 
-.pswp__img--placeholder {
-  border-radius: 0 !important;
+.pswp--anim-complete .pswp__img {
+  clip-path: inset(0 round var(--img-radius, 8px));
 }