vue 路由 过渡_Vue路由器的材料设计导航过渡

vue 路由 过渡

vue-router-md-transition (vue-router-md-transition)

The MaterialDesignTransition.vue SFC(Single File Component) wraps Vue's built-in <transition> component with additional CSS styles to achieve Material Design transition effect.

MaterialDesignTransition.vue SFC(单个文件组件)使用其他CSS样式包装Vue的内置<transition>组件，以实现Material Design过渡效果。

View Demo 查看演示 View Github 查看Github

用法 (Usage)

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

安装 (Install)

直接下载/ CDN (Direct Download / CDN)

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

在vue和vue-router之后包括UMD构建，该组件将自动注册：

<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 bundle.run, unpkg and jsdelivr.

package该软件包可用于bundle.run ， unpkg和jsdelivr 。

ES模块 (ES module)

Install via npm:

通过npm安装：

npm install vue-router-md-transition

Import into your application:

导入您的应用程序：

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

Register the component:

注册组件：

// globally
Vue.component('md-transition', MaterialDesignTransition);

or

要么

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

定制： (Customize:)

过渡方向 (Transition direction)

<md-transition :reverse="true">
  <router-view></router-view>
</md-transition>

禁用过渡 (Disable transition)

<md-transition :disabled="true">
  <router-view></router-view>
</md-transition>

You can dynamically control the transition by watching router's behavior. For example:

您可以通过观察路由器的行为来动态控制过渡。 例如：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <md-transition :reverse="routeBack" :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: () => ({
    routeBack: false,
    transitionDisabled: false,
  }),
  watch: {
    $route(to, from) {
      // disabled for browser refresh
      this.transitionDisabled = !from.name;
      // dynamically set direction
      if (to.path === '/') {
        this.routeBack = true;
        return;
      }
      if (from.path === '/') {
        this.routeBack = false;
        return;
      }
      const toDepth = to.path.split('/').length;
      const fromDepth = from.path.split('/').length;
      this.routeBack = toDepth < fromDepth;
    },
  },
};
</script>

过渡速度 (Transition speed)

Use CSS variable to override the default (250ms) animation duration:

使用CSS变量覆盖默认的动画持续时间(250ms)：

<style>
:root {
  --md-transition-duration: 400ms;
}
</style>

衰落层 (The fading layer)

The fading effect is achieved by adding an additional layer between the current view element and the upcoming view element. 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. This creates a visual effect of fading.

淡入淡出效果是通过在当前视图元素和即将到来的视图元素之间添加一个附加层来实现的。 此衰落层只是当前视图(或反向的前一个视图)元素的::after psuedo元素，其background设置为与元素容器的背景相同，并逐渐将其opacity从0增加到1 。 这会产生褪色的视觉效果。

更改渐变层背景 (Change fading layer background)

To get the best result, the the fading layer's background should match the background of the element's container.

为了获得最佳结果，衰落层的背景应与元素容器的背景匹配。

Use CSS variable to override the default background:

使用CSS变量覆盖默认背景：

<style>
:root {
  /* set a color to match container's background, default is #fafafa */
  --md-fading-background: white;
}
</style>

If your app is in dark mode you may want the fading background to be dark:

如果您的应用处于暗模式，则可能希望褪色的背景变暗：

<md-transition class="md-dark">
  <router-view></router-view>
</md-transition>

<style>
:root {
  /* set a color to match container's background, default is #121212 */
  --md-fading-background-dark: black;
}
</style>

更改渐变层偏移量顶部 (Change fading layer offset top)

By 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. This can also be overriden by CSS variables:

默认情况下，在过渡期间，渐变层将有一个偏移顶部，以便不与Material Design顶部应用栏重叠。 CSS变量也可以覆盖此变量：

<style>
:root {
  /* default is 56px, when viewport width < 960px */
  --md-app-bar-height: 0;
  /* default is 64px, when viewport width >= 960px */
  --md-app-bar-height-large: 0;
}
</style>

You can use .md-no-app-bar to quickly disable the offset top if your page is not using the app bar:

如果您的页面未使用应用栏，则可以使用.md-no-app-bar快速禁用偏移顶部：

<md-transition class="md-no-app-bar">
  <router-view></router-view>
</md-transition>

Or use .md-app-bar-extended to set it to 128px if you're using an extended top app bar:

或者，如果您使用扩展的顶部应用栏，请使用.md-app-bar-extended将其设置为128px ：

<md-transition class="md-app-bar-extended">
  <router-view></router-view>
</md-transition>

Vue路由器之外 (Beyond Vue Router)

By default, the <md-transition></md-transition> will treat the element inside as a full width (block-level) element. This should be fine under most circumstances as the <router-view></router-view> is usually a full width element. But you can add the .md-auto-width class to disable this feature in case you don't use a full width router view:

默认情况下， <md-transition></md-transition>会将内部元素视为全宽(块级)元素。 在大多数情况下，这应该没问题，因为<router-view></router-view>通常是全角元素。 但是，如果不使用全角路由器视图，则可以添加.md-auto-width类以禁用此功能：

<md-transition class="md-auto-width">
  <router-view></router-view>
</md-transition>

In fact, with .md-auto-width applied, you can not only use this package for Vue Router, but also any arbitrary transitions supported by Vue:

实际上，在应用.md-auto-width情况下，您不仅可以将此包用于Vue路由器，还可以使用Vue支持的任何任意转换：

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

If you want more customizations, simply take the src/components/MaterialDesignTransition.vue, tweak it and use it just as any normal Vue SFC the way you like. Or you can submit a pull request to help me make it better.

如果要进行更多自定义，只需采用src/components/MaterialDesignTransition.vue ，对其进行调整即可像您喜欢的任何普通Vue SFC一样使用它。 或者，您可以提交请求请求，以帮助我做得更好。

翻译自: https://vuejsexamples.com/material-design-navigation-transition-for-vue-router/

vue 路由 过渡