Vue Material - 路由器视图上的原生转换

Question

在我当前的项目中，我使用 Vue Material 来开发单页应用程序。逻辑遵循趋势：单个 "container" 组件，我在其中根据路线移动当前视图。

在 Vue Material 网站上（在 docs 部分），我注意到在导航过程中，页面以 material 设计风格动画化，正如设计模式所建议的那样（与"fade/slideup" 转换）。我没有在提到的文档中看到任何关于它的参考。

任何人都知道那些是必须临时实现的转换，就像其他典型的 Vue 应用程序一样，或者集成在 Vue Material 框架上，但我的应用程序缺少一些实现（即使用 Vue路由器可能会导致某种错误）？目前在我的代码中没有 <transition> 标签，我正在使用 material 组件，如文档所示。

预先感谢您的回答。

Answer 1

您应该用 <transition> 标签包裹 <router-view>：

<transition name="fade-slide-up" mode="out-in">
  <router-view></router-view>
</transition>

然后在 <style> 中创建您想要的过渡。这是一个例子：

.fade-slide-up-enter-active {
  transition: all 0.5s ease;
}
.fade-slide-up-leave-active {
  transition: all 0.5s ease;
}
.fade-slide-up-enter, .fade-slide-up-leave-to {
  transform: translateY(40px);
  opacity: 0;
}

Vue Material - 路由器视图上的原生转换

Vue Material - Native transitions on router view

javascript

vue.js

vue-router

vuejs2

vue-material