/* 一念 · 页面翻转动效（"古籍翻页"质感） * * 触发：router 在 _switch 时给目标 .app-page 加 .yj-page-enter-forward 或 .yj-page-enter-backward * 视觉：3D Y 轴旋转 + 透视 + 极轻的纸张投影，模拟翻一页古籍 * 性能：纯 CSS、单帧 transform；动画结束后类名保留无所谓（下次切走前会清掉） * * 设计取舍： * - duration 320ms：比 iOS 系统过渡稍长，给"纸张感"留呼吸；但不会等到不耐烦 * - perspective 1400px：远视感强、不让纸看起来像被挤扁 * - cubic-bezier(.22,.7,.18,1)：前快后慢，像纸落定的物理感 * - 中段叠一层棕黄色阴影 → 暗示古籍泛黄纸边 * * 系统/用户偏好降级： * - prefers-reduced-motion → 完全禁用，回到瞬切 * - → 同上（应用内"减弱动效"开关） */ /* 共享：所有 .app-page 都要有翻页所需的 3D 容器属性 */ .app-page { /* 给祖先 / 自身 transform-style: preserve-3d 让 perspective 生效 */ perspective: 1400px; -webkit-perspective: 1400px; transform-origin: center center; will-change: transform, opacity; } /* "前进"：往右切（home → xuetang → wode）—— 新页从右侧"翻入" */ .app-page.yj-page-enter-forward { animation: yj-page-flip-forward 360ms cubic-bezier(0.22, 0.7, 0.18, 1) both; } @keyframes yj-page-flip-forward { 0% { transform: perspective(1400px) rotateY(28deg) translateX(40%) translateZ(-80px); opacity: 0; filter: brightness(0.85); box-shadow: -20px 0 40px rgba(120, 80, 30, 0.0); } 40% { box-shadow: -30px 0 60px rgba(120, 80, 30, 0.18); } 100% { transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0); opacity: 1; filter: brightness(1); box-shadow: 0 0 0 rgba(120, 80, 30, 0); } } /* "后退"：往左切（wode → xuetang → home）—— 新页从左侧"翻入" */ .app-page.yj-page-enter-backward { animation: yj-page-flip-backward 360ms cubic-bezier(0.22, 0.7, 0.18, 1) both; } @keyframes yj-page-flip-backward { 0% { transform: perspective(1400px) rotateY(-28deg) translateX(-40%) translateZ(-80px); opacity: 0; filter: brightness(0.85); box-shadow: 20px 0 40px rgba(120, 80, 30, 0.0); } 40% { box-shadow: 30px 0 60px rgba(120, 80, 30, 0.18); } 100% { transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0); opacity: 1; filter: brightness(1); box-shadow: 0 0 0 rgba(120, 80, 30, 0); } } /* 系统/用户偏好降级 */ @media (prefers-reduced-motion: reduce) { .app-page.yj-page-enter-forward, .app-page.yj-page-enter-backward { animation: none !important; } } .yj-reduce-motion .app-page.yj-page-enter-forward, .yj-reduce-motion .app-page.yj-page-enter-backward { animation: none !important; }