style(viewer): 广告轮播改从右往左滑动切换(translateX 轨道,替代淡入淡出)

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-29 14:26:41 +08:00
parent f88c1c170a
commit 048732dfef
+15 -24
View File
@@ -98,9 +98,10 @@ function openAd(ad: PublicAd): void {
@pointerenter="paused = true" @pointerdown="paused = true" @pointerleave="paused = false"
@touchstart="onTouchStart" @touchend="onTouchEnd"
>
<!-- 全帧堆叠 + 透明度过渡(2026-09-29 切换柔化):所有帧常驻 DOM 预加载
(首轮切换不空白),仅活跃帧可交互/可聚焦;错误上报只看活跃帧。 -->
<div class="ad-slides">
<!-- 轨道式滑动(2026-09-29 用户定稿:从右往左滑入,不做淡入淡出):全帧
常驻轨道预加载(首轮切换不空白),track 整体 translateX;仅活跃帧
可聚焦;错误上报只看活跃帧。 -->
<div class="ad-slides" :style="{ transform: `translateX(-${current * 100}%)` }">
<button
v-for="(ad, i) in ads" :key="ad.adId" type="button" class="ad-slide"
:class="{ active: i === current }" :aria-label="t('ads.open')"
@@ -146,41 +147,31 @@ function openAd(ad: PublicAd): void {
touch-action: pan-y;
}
.ad-slides {
position: relative;
display: flex;
width: 100%;
height: 100%;
align-items: flex-start; /* 各帧自然高度(运营上传统一高度图);track 高=最高帧 */
/* 从右往左滑动切换(下一帧自右侧滑入;后退/右滑自然反向)。 */
transition: transform 0.45s ease;
}
.ad-slide {
/* 非活跃帧绝对叠放(淡出层,cover 吸收与活跃帧的细微高度差);活跃帧
* 回归文档流撑起容器高度——图片自然高度即轮播高度(2026-09-29 用户定稿:
* 运营上传统一高度图片,容器不用固定比例锚点)。 */
position: absolute;
inset: 0;
flex: 0 0 100%;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
/* 淡入淡出(切换柔化):非活跃帧透明且不拦截交互;transition 只对 opacity,
* 与 prefers-reduced-motion 无关(纯视觉淡变,非位移动画)。 */
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.ad-slide.active {
position: relative;
inset: auto;
height: auto;
opacity: 1;
pointer-events: auto;
/* 位移类动画尊重系统减动效偏好(HeartComponents 同规)。 */
@media (prefers-reduced-motion: reduce) {
.ad-slides {
transition: none;
}
}
.ad-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
height: auto;
}
.ad-badge {
position: absolute;