CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Question3r
Question3r

Reputation: 3742

How to affect elements with the router transition that are not part of the <router-view>?

I'm linking snippets from jsfiddle because SO is blocking the routing

I added a router transition animation when navigating through my view components.

https://jsfiddle.net/ysc1x3rn/1/

const One = {
  template: '<div>Home</div>'
}
const Two = {
  template: '<div>Foo</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: One
    },
    {
      path: '/2',
      component: Two
    }
  ]
})

new Vue({
  router,
  el: '#app'
})
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/">page1</router-link> |
  <router-link to="/2">page2</router-link>
  <transition name="fade" mode="out-in">
    <router-view :key="$route.path" />
  </transition>
</div>

But is there a way I can also animate the navbar which is not part of the router view?

Since the transition tag is only able to deal with one element I put everything inside a wrapper div and added keys to every element inside it. Like so:

  <transition name="fade" mode="out-in">
    <div key="fade-wrapper">
      <!-- Navbar component -->
      <div key="main-navbar">
        <router-link key="link-one" to="/">page1</router-link> |
        <router-link key="link-two" to="/2">page2</router-link>
      </div>
      <router-view :key="$route.path" />
    </div>
  </transition>

https://jsfiddle.net/phnugr6v/1/

const One = {
  template: '<div>Home</div>'
}
const Two = {
  template: '<div>Foo</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: One
    },
    {
      path: '/2',
      component: Two
    }
  ]
})

new Vue({
  router,
  el: '#app'
})
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <div key="fade-wrapper">
      <!-- Navbar component -->
      <div key="main-navbar">
        <router-link key="link-one" to="/">page1</router-link> |
        <router-link key="link-two" to="/2">page2</router-link>
      </div>
      <router-view :key="$route.path" />
    </div>
  </transition>
</div>

Unfortunately there is no animation anymore. Is there a way to fix it?

Upvotes: 0

Views: 102

Answers (1)

yuri
yuri

Reputation: 3400

The problem is that your key is not dynamic, whenever you change the path it does not detect any change as it the same component with the same key, to avoid this, use a dynamic key for your div, one related to the route should work nice, so try to use the $route.path as a key for your div.

Now the key changes whenever you change the route and so it triggers the transition:

<div id="app">
  <transition name="fade" mode="out-in">
    <div :key="$route.path">
      <!-- Navbar component -->
      <div key="main-navbar">
        <router-link key="link-one" to="/">page1</router-link> |
        <router-link key="link-two" to="/2">page2</router-link>
      </div>
      <router-view :key="$route.path" />
    </div>
  </transition>
</div>

https://jsfiddle.net/vf75zmw0/1/

Upvotes: 1

Related Questions