javascript - Vue Material - 路由器 View 上的原生转换

Question

在我当前的项目中，我使用 Vue Material 开发单页应用。逻辑遵循趋势:单个“容器”组件，我在其中根据路由移动当前 View 。

在 Vue Material 网站上(在 docs 部分)，我注意到在导航过程中，页面以 Material Design 风格进行动画处理，正如设计模式所建议的那样(带有“淡入淡出/滑动”过渡)。我没有在提到的文档中看到任何关于它的引用。

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

预先感谢您的回答。

Answer 1

你应该包装<router-view>用<transition>标签:

<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;
}