vue-router-md-transition

A simple transparent wrapper component for Vue's built-in <transition> component with Material Design transition effect baked in.

🔔 v1 is outdated, consider upgrading to v2!

Demo

• Codepen (CDN)
• Vuetify SPA (ES module)

Usage

<md-transition>
  <router-view></router-view>
</md-transition>

Install

Direct Download / CDN

Include the UMD build after vue and vue-router, the component will be registered automatically:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
<script src="/path/to/vue-router-md-transition.umd.min.js"></script>

📦 This package is available on unpkg, jsdelivr, bundle.run, and so on.

ES module

Install via npm:

npm install vue-router-md-transition

Import into your application:

import MaterialDesignTransition from 'vue-router-md-transition';

Register the component:

// globally in the entry file such as "main.js"
Vue.component('md-transition', MaterialDesignTransition);

// or, locally in specific components
export default {
  components: {
    'md-transition': MaterialDesignTransition,
  },
};

Props

offsetTop (Type: number | Default: 64)

Used to fine tune the translate3d CSS function to match the height of the top app bar in Material Design spec.

duration (Type: number | Default: 250)

Transition duration in milliseconds.

reverse (Type: boolean | Default: false)

Reverse transition direction.

disabled (Type: boolean | Default: false)

Do not apply any transition.

... For other props, please refer to Vue's official api doc of the built-in <transition> component.

Example

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <md-transition
      :offset-top="56"
      :duration="300"
      :reverse="isRouteBack"
      :disabled="transitionDisabled"
    >
      <router-view></router-view>
    </md-transition>
  </div>
</template>

<script>
import MaterialDesignTransition from 'vue-router-md-transition';

export default {
  components: {
    'md-transition': MaterialDesignTransition,
  },
  data: () => ({
    isRouteBack: false,
    transitionDisabled: false,
  }),
  watch: {
    $route(to, from) {
      // disabled when refreshing browser
      this.transitionDisabled = !from.name;
      // reverse direction when routing back
      if (to.path === '/') {
        this.isRouteBack = true;
      } else if (from.path === '/') {
        this.isRouteBack = false;
      } else {
        const toDepth = to.path.split('/').length;
        const fromDepth = from.path.split('/').length;
        this.isRouteBack = toDepth < fromDepth;
      }
    },
  },
};
</script>

Not Only for Vue Router

You can also use it in regular transitions, just like the built-in <transition>:

<md-transition>
  <div key="foo" v-if="show">Foo</div>
  <div key="bar" v-else>Bar</div>
</md-transition>