// 全局 css 动画

/* ------------------ 切页动画 ------------------ */
.left-jump-left-leave-active,
.left-jump-left-enter-active,
.right-jump-right-leave-active,
.right-jump-right-enter-active,
.left-jump-right-enter-active,
.left-jump-right-leave-active,
.right-jump-left-enter-active,
.right-jump-left-leave-active {
    transition: all .5s ease;
    position: absolute;
}

/* --- right-jump-left  左出左进 --- */
.left-jump-left-enter-from {opacity: 0; transform: translateX(30px);}
.left-jump-left-leave-to {opacity: 0; transform: translateX(-30px);}

/* --- right-jump-right  右出右进 --- */
.right-jump-right-enter-from {opacity: 0; transform: translateX(-30px);}
.right-jump-right-leave-to {opacity: 0; transform: translateX(30px);}

/* --- left-jump-right 左出右进 --- */
.left-jump-right-enter-from, .left-jump-right-leave-to {opacity: 0;transform: translateX(-30px);}

/* --- right-jump-left 右出左进 --- */
.right-jump-left-enter-from, .right-jump-left-leave-to {opacity: 0; transform: translateX(30px);}

/* --- opacity 渐变 --- */
.opacity-enter-active,
.opacity-leave-active {
    transition: all 0.7s ease;
    position: absolute;
}
.opacity-enter-from,
.opacity-leave-to {
    opacity: 0;
}


/* ------------------ 其它动画 ------------------ */

/* 从右向左 渐入 */
@keyframes right-to-left {
    0% {transform: translateX(60px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}

/* 从左向右 渐入 */
@keyframes left-to-right {
    0% {transform: translateX(-60px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}

/* 从下往上渐入 */
@keyframes bottom-to-top {
    0% {transform: translateY(60px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

/* 从下往上渐入 */
@keyframes top-to-bottom {
    0% {transform: translateY(-60px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

/* 透明，渐入 */
@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* 透明，渐出 */
@keyframes fade-out {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

