// global transition css

/* fade */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}


/* fade-transform */

// .fade-transform-leave-active,
// .fade-transform-enter-active {
//     transition: all 0.5s;
// }
// .fade-transform-enter {
//     opacity: 0;
//     transform: translateX(-30px);
// }
// .fade-transform-leave-to {
//     opacity: 0;
//     transform: translateX(30px);
// }

/* 入场起始样式 */

.fade-transform-enter-from {
    opacity: 0;
    /* 透明度 */
}


/* 入场过渡效果 */

.fade-transform-enter-active {
    transition: 0.5s opacity ease-in;
    animation: leftFade 0.5s;
}


/* 入场结束样式 */

.fade-transform-enter-to {
    opacity: 1;
}


/* 出场起始样式 */

.fade-transform-leave-from {
    opacity: 1;
    /* 透明度 */
}


/* 出场过渡效果 */

.fade-transform-leave-active {
    transition: 0.5s opacity ease-out;
    animation: rightFade 0.5s;
}


/* 出场结束样式 */

.fade-transform-leave-to {
    opacity: 0;
}

@keyframes leftFade {
    /* 进度为 X% 时，元素的横坐标位置 */
    0% {
        transform: translateX(30px);
    }
    50% {
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes rightFade {
    /* 进度为 X% 时，元素的横坐标位置 */
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(30px);
    }
}

// .breadcrumb-enter-active,
// .breadcrumb-leave-active {
//     transition: all .5s;
// }
// .breadcrumb-enter,
// .breadcrumb-leave-active {
//     opacity: 0;
//     transform: translateX(20px);
// }
// .breadcrumb-move {
//     transition: all .5s;
// }
// .breadcrumb-leave-active {
//     position: absolute;
// }

/* breadcrumb transition */


/* 入场起始样式 */

.breadcrumb-enter-from {
    opacity: 0;
    /* 透明度 */
}


/* 入场过渡效果 */

.breadcrumb-enter-active {
    transition: 0.5s opacity ease-in;
    animation: leftBreadcrumb 0.5s;
}


/* 入场结束样式 */

.breadcrumb-enter-to {
    opacity: 1;
}


/* 出场起始样式 */

.breadcrumb-leave-from {
    opacity: 1;
    /* 透明度 */
}


/* 出场过渡效果 */

.breadcrumb-leave-active {
    opacity: 0;
}


/* 出场结束样式 */

.breadcrumb-leave-to {
    opacity: 0;
}

@keyframes leftBreadcrumb {
    /* 进度为 X% 时，元素的横坐标位置 */
    0% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0px);
    }
}