@charset "UTF-8";

//-----------------------------------------------------
// page slide
//-----------------------------------------------------

// 设置切换页面为绝对定位，且animation-fill-mode为both
%page-slide {
    position: absolute;
    animation-fill-mode: both;
}

// 页面右进左出
.slide-right-in {
    animation: 0.3s $timingFunction pageRightIn;
    @extend %page-slide;
}
.slide-left-out {
    animation: 0.4s $timingFunction 0.1s pageLeftOut;
    @extend %page-slide;
}

// 左进右出
.slide-left-in {
    animation: 0.3s $timingFunction pageLeftIn;
    @extend %page-slide;
}
.slide-right-out {
    animation: 0.4s $timingFunction 0.1s pageRightOut;
    @extend %page-slide;
}

// @keyframes
@keyframes pageRightIn {
    0% {
        transform: translate3d(100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes pageLeftOut {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}
@keyframes pageLeftIn {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes pageRightOut {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}