在我当前的项目中,我使用 Vue Material 开发单页应用。逻辑遵循趋势:单个“容器”组件,我在其中根据路由移动当前 View 。
在 Vue Material 网站上(在 docs 部分),我注意到在导航过程中,页面以 Material Design 风格进行动画处理,正如设计模式所建议的那样(带有“淡入淡出/滑动”过渡)。我没有在提到的文档中看到任何关于它的引用。
任何人都知道那些是必须临时实现的转换,就像其他典型的 Vue 应用程序一样,或者是集成在 Vue Material 框架上但我的应用程序缺少一些实现(即使用 Vue Router 可能会导致某种漏洞)?此时在我的代码中没有 <transition>
标签,我使用的是 Material 组件,如文档所示。
预先感谢您的回答。
最佳答案
你应该包装<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;
}
关于javascript - Vue Material - 路由器 View 上的原生转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51323253/