Vue Material - 路由器视图上的本机转换

Question

在我当前的项目中，我使用 Vue Material 来开发单页应用程序。逻辑顺应潮流：一个单一的“容器”组件，我在其中根据路线移动当前视图。

在 Vue Material 网站上（在 docs 部分），我注意到在导航期间，页面以材料设计风格进行动画处理，正如设计模式所暗示的那样（带有“淡入淡出/上滑”过渡）。我在提到的文档中没有看到任何关于它的参考。

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

提前感谢您的回答。

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