0

I am trying to apply transition slide effect on my hero. The hero's height is 100vh on homepage and half of it on the rest of the pages. I have tried many ways but i cannot get it to work. I've set up a $route watcher and it applies the particular class with the appropriate height property respective to the current page. There is no transition applied to the hero height change when navigating between pages. Please help me ive been trying to figure this out for days. I'm using Vuejs 3 and 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
}
Jay Sharav
  • 61
  • 1
  • 5

1 Answers1

0

Trying adding the validation on updated hook, there is when the component has changed, something like:

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");
      }    
   }
 };
Jose Rojas
  • 3,490
  • 3
  • 26
  • 40