84 lines
1.7 KiB
CSS
84 lines
1.7 KiB
CSS
/**
|
||
* channel-transition.css
|
||
* 路由过渡动画 - 让切换像呼吸一样自然
|
||
* 提供两种模式：淡入淡出(fade) / 滑入滑出(slide)
|
||
*/
|
||
|
||
/* 基础容器样式 */
|
||
.route-container {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 200px;
|
||
}
|
||
|
||
/* 所有路由页面默认绝对定位，便于重叠动画 */
|
||
.route-page {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
/* 淡入淡出模式 */
|
||
.fade-mode .route-page {
|
||
opacity: 0;
|
||
transform: scale(0.98);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.fade-mode .route-page.active {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
pointer-events: auto;
|
||
position: relative; /* 激活页变为相对定位，占据文档流高度 */
|
||
}
|
||
|
||
/* 滑入滑出模式 */
|
||
.slide-mode .route-page {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.slide-mode .route-page.active {
|
||
position: relative;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 进入动画：从右侧滑入 */
|
||
.slide-mode .route-page.slide-enter {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.slide-mode .route-page.active.slide-enter {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* 离开动画：向左侧滑出（用于后退时的反向） */
|
||
.slide-mode .route-page.slide-exit {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
/* 前进/后退方向控制 */
|
||
.slide-mode.forward .route-page.slide-enter {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.slide-mode.forward .route-page.active.slide-enter {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.slide-mode.backward .route-page.slide-enter {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.slide-mode.backward .route-page.active.slide-enter {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* 防止快速点击时动画重叠 */
|
||
.route-page {
|
||
will-change: transform, opacity;
|
||
}
|