/**
 * 页面过场动画样式
 * 定义 iframe 页面切换时的动画效果
 */

/* 页面 iframe 基础样式 */
.page-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 激活状态（显示页面） */
.page-frame.active {
    display: block;
}

/* ==================== 淡入淡出动画 ==================== */

/* 淡出（当前页面退出） */
.page-frame.fade-out {
    opacity: 0;
}

/* 淡入（新页面进入） */
.page-frame.fade-in {
    opacity: 1;
}

/* ==================== 向左滑动动画 ==================== */

/* 向左滑出（当前页面向左退出） */
.page-frame.slide-left-out {
    transform: translateX(-100%);
    opacity: 0;
}

/* 向左滑入（新页面从右侧进入） */
.page-frame.slide-left-in {
    transform: translateX(0);
    opacity: 1;
}

/* ==================== 向右滑动动画 ==================== */

/* 向右滑出（当前页面向右退出） */
.page-frame.slide-right-out {
    transform: translateX(100%);
    opacity: 0;
}

/* 向右滑入（新页面从左侧进入） */
.page-frame.slide-right-in {
    transform: translateX(0);
    opacity: 1;
}