路由更改时的Vue组件高度转换

Question

我正在尝试对我的英雄应用过渡幻灯片效果。英雄的高度在主页上是 100vh，其余页面上是一半。我尝试了很多方法，但我无法让它发挥作用。我已经设置了一个 $route 观察程序，它将具有相应高度属性的特定类应用于当前页面。在页面之间导航时，没有应用于英雄高度变化的过渡。请帮助我几天来一直试图解决这个问题。我正在使用 Vuejs 3 和 Buefy。

HTML

<transition name="my-slide">
<section class="hero" :class=" 'is-fullheight': heroFull ">
...
</section>
</transition>
<script>
export default {
    name: "Hero",
    data() {
        return {
            heroFull: false,
        };
    },
    watch: {
        $route() {
            if (this.$route.path === "/") {
            this.heroFull = true;
            console.log("its at home");
        } else {
            this.heroFull = false;
            console.log("its not at home");
                }
            }
        }
    };
</script>

CSS

.hero {
    transition: height 0.3s !important;
}

.hero.fullheight {
    min-height: 100vh;
}

.my-slide-enter-active,
.my-slide-leave-active {
    transition: height 0.3s 
}

.my-slide-enter-from,
.my-slide-leave-to {
    height: auto
}

.my-slide-enter-to,
.my-slide-leave-from {
    height: 100vh
}

Answer 1

尝试在updated钩子上添加验证，当组件发生变化时，类似于：

export default {
  name: "Hero",
  data() {
    return {
        heroFull: false,
    };
  },
  updated() {
      if (this.$route.path === "/") {
        this.heroFull = true;
        console.log("its at home");
      } else {
        this.heroFull = false;
        console.log("its not at home");
      }    
   }
 };