CODEWITHSUNDEEP
vue.js
thiebo
thiebo

Reputation: 1435

vuejs transitions only on some views

I have transitions working between the pages of my vuejs application, defined in App.vue like so:

<template>
  <div class="container mb-auto">
    <router-view v-slot="{Component}" >
      <transition name="slide" mode="out-in">
        <component :is="Component" :key="route.path"></component>
      </transition>
    </router-view>
  </div>

  <TheFooter v-if="withMenu" />
</template>

// and definition of transitions in css

I don't want this to work between all views (pages) of my app, but only between views who's url starts with /welcome

How do I use some transitions between some pages, and other transitions between other pages?

Upvotes: 0

Views: 36

Answers (1)

kissu
kissu

Reputation: 46706

You can use the JS transitions hooks as shown here: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

And make a check if you're on the correct path or not, example on a /welcome-home path below

<template>
  <div>
    <transition @before-enter="onBeforeEnter">
      <!-- ... -->
    </transition>
  </div>
</template>

<script>
export default {
  methods: {
    onBeforeEnter() {
      if (this.$route.path.startsWith('/welcome')) {
        // cool transitions!
      }
    },
  },
}
</script>

Upvotes: 1

Related Questions