Dynamic page transitions in Vue Router only working for one component

Question

My goal is to transition between two pages: about and home. When the user navigates to home, I want to apply the slide-down transition to both components (about and home), and when the user navigates away from home, I want to apply the slide-up transition to both.

The about component behaves properly (slides up and down at the correct times), but, the home page always experiences the slide-down transition.

index.js

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: "/",
            name: "home",
            component: () => import("../views/HomeView.vue"),
            // beforeEnter: (to) => {
            //     to.meta.transition = "slide-down";
            // },
        },
        {
            path: "/about",
            name: "about",
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import("../views/AboutView.vue"),
        },
    ],
});

router.afterEach((to, from) => {
    console.log({ to, from });

    if (to.name === "home") {
        to.meta.transition = "slide-down";
        from.meta.transition = "slide-down";
    } else if (from.name === "home") {
        to.meta.transition = "slide-up";
        from.meta.transition = "slide-up";
    }
});

export default router;

App.vue

<script setup>
import { RouterLink, RouterView } from "vue-router";
import Nav from "./components/Nav.vue";
</script>

<template>
    <RouterView v-slot="{ Component, route }">
        <transition :name="route.meta.transition">
            <component :is="Component" />
        </transition>
    </RouterView>
    <!-- <RouterView /> -->
    <Nav />
</template>

Base.css

.slide-down-enter-active,
.slide-down-leave-active {
    position: absolute;
    width: 100%;
    transition: all 0.75s ease;
}
.slide-down-enter-from {
    top: calc(-100vh + 200px);
    /* opacity: 0; */
}
.slide-down-enter-to {
    top: 0;
    opacity: 1;
}
.slide-down-leave-from {
    top: 100px;
    opacity: 1;
}
.slide-down-leave-to {
    top: 100vh;
    opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
    position: absolute;
    width: 100%;
    transition: all 0.75s ease;
}
.slide-up-enter-from {
    top: calc(100vh - 100px);
    /* opacity: 0; */
}
.slide-up-enter-to {
    top: 100px;
    opacity: 1;
}
.slide-up-leave-from {
    top: 0;
    opacity: 1;
}
.slide-up-leave-to {
    top: calc(-100vh + 100px);
    opacity: 0;
}

I'm certain I've made a dumb, obvious mistake. But I've been troubleshooting for two hours and have gotten no closer to an answer.

Thanks