:root {
    --transitionDuration: 0.65s;
    --translateY: 3.5rem;
}

/*-------------fadein 開始----------------*/
.fadeUp {
    opacity: 0;
}

    .fadeUp.show {
        animation: fadeUp var(--transitionDuration) ease-in-out forwards;
    }


@keyframes fadeUp {
    0% {
        -webkit-transform: translateY(var(--translateY));
        transform: translateY(var(--translateY));
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
/*-------------fadein 結束----------------*/

/*-------------zoomIn 開始----------------*/
.zoomIn {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/*-------------zoomIn 結束----------------*/
.v-enter-active,
.v-leave-active {
    transition: opacity 0.1s;
    position: absolute; /* 🌟 終極殺招：讓離開和進入的元素重疊 */
    top: 0;
    left: 0;
    width: 100%;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-to,
.v-leave-from {
    opacity: 1;
}