fix(photoswipe): keyboard arrow animation via CSS keyframes
Previous approach (CSS transition + reflow trick) is unreliable in Firefox. New approach: PhotoSwipe emits 'change' synchronously before painting; we add a direction-aware CSS keyframe animation to the incoming slide element, with animation-fill-mode:both so there is no flash before the animation starts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -459,6 +459,19 @@ body::after {
|
||||
/* iOS Safari: 100vh freezes when address bar hides; dvh tracks the live viewport */
|
||||
.pswp { height: 100dvh; }
|
||||
|
||||
/* Keyboard arrow navigation slide-in animations */
|
||||
.pswp-key-from-right { animation: pswpKeyFromRight 0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
|
||||
.pswp-key-from-left { animation: pswpKeyFromLeft 0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
|
||||
|
||||
@keyframes pswpKeyFromRight {
|
||||
from { transform: translateX(48px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes pswpKeyFromLeft {
|
||||
from { transform: translateX(-48px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Map page ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.map-page .site-main { max-width: none; padding: 0; }
|
||||
|
||||
Reference in New Issue
Block a user