#Vue router transition install

md-app-bar-extended to set it to 128px if you're using an extended top app bar: īy default, the will treat the element inside as a full width (block-level) element. md-no-app-bar to quickly disable the offset top if your page is not using the app bar: * default is 56px, when viewport width = 960px */ This can also be overriden by CSS variables: * set a color to match container's background, default is #121212 */īy default, during transition there will be an offset top for the fading layer in order to not overlap with the Material Design top app bar. If your app is in dark mode you may want the fading background to be dark: * set a color to match container's background, default is #fafafa */ Use CSS variable to override the default background: To get the best result, the the fading layer's background should match the background of the element's container. This fading layer is just the ::after psuedo element of the element of current view (or previous view in reversed direction), with its background set to the same with the element container's background and gradually increasing its opacity from 0 to 1. The fading effect is achieved by adding an additional layer between the current view element and the upcoming view element. Use CSS variable to override the default (250ms) animation duration: Import MaterialDesignTransition from 'vue-router-md-transition' Ĭonst toDepth = to.path.split('/').length Ĭonst fromDepth = ('/').length You can dynamically control the transition by watching router's behavior.

Vue.component('md-transition', MaterialDesignTransition) Import into your application: import MaterialDesignTransition from 'vue-router-md-transition'

#Vue router transition install

Install via npm: npm install vue-router-md-transition ? This package is available on n, unpkg and jsdelivr. Include the UMD build after vue and vue-router, the component will be registered automatically: