style(viewer): 广告轮播改从右往左滑动切换(translateX 轨道,替代淡入淡出)
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user