/* ========================================================================== 页面切换过渡反馈（商品列表 / 配置页 / 确认订单 共用） -------------------------------------------------------------------------- 为什么需要：切换分组、搜索、翻页都是「整页跳转」（服务端渲染）， 点击后到新页面出现之间有一段什么都不动的空档 —— 本地实测 0.4s 上下， 外网还要加上网络往返就明显得多。这段时间界面毫无反馈，看起来像没点上， 用户容易再点一次，观感很粗糙。 反馈分两段： 1) 离场：点中有效链接的瞬间，主内容淡出、顶部出现进度条 → 立刻「有反应了」； 2) 入场：新页面首帧整体淡入 → 衔接自然，不再「啪」地闪出来。 ⚠ 只允许动 opacity，不要加 transform（位移/缩放）： 配置页底部结算栏 .configoption_total 是 position:fixed， 且它在 .qsv-main-config 内部。fixed 元素的包含块是最近的「带 transform 的祖先」， 一旦给 .qsv-main-config 加 transform，那条固定栏就会改为相对它定位、直接跑偏。 同理 .qsv-page 及其内容祖先都不能带 transform。 ========================================================================== */ /* 顶部细进度条：纯 CSS 动画，不需要 JS 定时维持。 它只是「正在跳转」的状态指示，不是装饰，所以不受减弱动效偏好影响。 */ .qsv-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, rgba(22, 104, 220, 0) 0%, #1668dc 45%, #1668dc 55%, rgba(22, 104, 220, 0) 100%); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; z-index: 99999; pointer-events: none; } .qsv-progress.is-active { opacity: 1; /* forwards 保留终态：进度条停在约 93%，直到新页面加载完把它带走。 不做成 100% 是有意的 —— 真实的完成信号是页面卸载， 提前走满反而会在慢网络下「走完了却还停着」而失焦。 */ animation: qsv-progress-run 1.1s cubic-bezier(.28, .62, .36, 1) forwards; } @keyframes qsv-progress-run { 0% { transform: scaleX(0); } 55% { transform: scaleX(.72); } 100% { transform: scaleX(.93); } } /* 离场：主内容淡出。.qsv-main 内部没有 fixed 元素（fixed 的底部栏在配置页 走的是 .qsv-main-config 里的 .configoption_total —— 故此处仅用 opacity， 改 opacity 不影响 fixed 的包含块，不会让它跑偏）。 */ .qsv-page.is-leaving .qsv-main, .qsv-page.is-leaving .qsv-main-config, .qsv-page.is-leaving .qiucart-checkout-page { opacity: .5; transition: opacity .18s ease; } /* 入场：新页面首帧整体淡入。 挂在 上的类（由模板输出），避免和卡片自带入场动画抢 transform。 */ html.qsv-enter body { animation: qsv-body-in .28s ease-out both; } @keyframes qsv-body-in { from { opacity: .35; } to { opacity: 1; } } /* 尊重系统「减弱动态效果」设置 */ @media (prefers-reduced-motion: reduce) { html.qsv-enter body { animation: none; } .qsv-page.is-leaving .qsv-main, .qsv-page.is-leaving .qsv-main-config, .qsv-page.is-leaving .qiucart-checkout-page { opacity: 1; transition: none; } }