vue中路由切换动画效果(transition)
关于VUE中路由之间切换效果使用ransition来实现一、现在要实现一个左右切换的效果1、在整个项目的路由中写上<template><div id="app"><FooterNav :isShowNav="isShowNav"></FooterNav><transition name="transitionRouter">
·
关于
VUE
中路由之间切换效果使用ransition
来实现
一、现在要实现一个左右切换的效果
1、在整个项目的路由中写上
<template> <div id="app"> <FooterNav></FooterNav> <transition name="transitionRouter"> <router-view></router-view> </transition> </div> </template>
2、定义样式效果
.transitionRouter-enter-active, .transitionRouter-leave-active { transition: all 0.4s; } .transitionRouter-enter, .transitionRouter-leave{ transform: translate3d(100%, 0, 0); }
3、补充说明
如果需要单个路由页面这样的效果,就定义在单个页面里面
<transition name="list-fade"> ... </transition>
- 4、代码见demo
更多推荐
已为社区贡献22条内容
所有评论(0)