Vue3路由切换时为指定组件添加带过渡效果的margin-right样式需求

步骤1：在User.vue中添加路由状态判断 #

通过计算属性监听当前路由，判断是否处于userNew子路由：

<template>
        <div class="main">
                <div class="user" :class="{ 'user-expanded': isUserNewActive }">Hello JACK
                        <router-link :to="{ name: 'userNew'}">
                                <span>Add User</span>
                        </router-link>
                </div>
                <div class="Form">
                        <router-view v-slot="{ Component }">
                                <transition name="route">
                                        <component :is="Component"/>
                                </transition>
                        </router-view>
                </div>
        </div>
</template>

<script>
export default {
        name: "User",
        computed: {
          isUserNewActive() {
            return this.$route.name === 'userNew'
          }
        }
}
</script>

步骤2：添加过渡样式 #

为.user元素设置过渡属性，并定义激活状态下的样式：

<style scoped>
.user {
  /* 基础样式保留，新增过渡属性 */
  transition: margin-right 0.3s ease; /* 可调整过渡时长与动画曲线 */
}

.user-expanded {
  margin-right: 200px;
}
</style>

替代方案：直接绑定行内样式 #

如果不想用类名，也可以直接通过动态行内样式实现：

<div class="user" :style="{ marginRight: isUserNewActive ? '200px' : '0' }">

同样需要在.user的css中添加transition: margin-right 0.3s ease;来触发过渡效果。

效果说明 #

• 当跳转到userNew子路由时，计算属性isUserNewActive变为true，自动为.user添加样式/类，触发过渡动画
• 点击关闭按钮返回父路由时，计算属性变为false，样式反向生效，过渡动画同步触发

内容的提问来源于stack exchange，提问作者kralyolda