1

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

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

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

提前感谢您的回答。

4

1 回答 1

2

<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;
}
于 2018-07-14T11:22:16.693 回答