Commit 7675bc90ea4a52ce1ddc9bf3b17f8db3ebe19081
1 parent
411f96a5
路由切换动画
Showing
5 changed files
with
53 additions
and
27 deletions
webintroduce/src/App.vue
| 1 | 1 | <template> |
| 2 | 2 | <div id="app"> |
| 3 | 3 | <VHeader v-if="headerShow"></VHeader> |
| 4 | - <div class="main-wrap"> | |
| 5 | - <router-view/> | |
| 6 | - </div> | |
| 7 | - | |
| 4 | + <transition :name="transitionName"> | |
| 5 | + <keep-alive> | |
| 6 | + <router-view class="main-wrap transitionBody"></router-view> | |
| 7 | + </keep-alive> | |
| 8 | + </transition> | |
| 8 | 9 | <VFooter v-if="footerShow"></VFooter> |
| 9 | 10 | </div> |
| 10 | 11 | </template> |
| ... | ... | @@ -21,7 +22,8 @@ export default { |
| 21 | 22 | data() { |
| 22 | 23 | return { |
| 23 | 24 | footerShow: true, |
| 24 | - headerShow: true | |
| 25 | + headerShow: true, | |
| 26 | + transitionName: 'transitionLeft' | |
| 25 | 27 | } |
| 26 | 28 | }, |
| 27 | 29 | watch: { |
| ... | ... | @@ -32,6 +34,9 @@ export default { |
| 32 | 34 | }else { |
| 33 | 35 | this.headerShow = this.footerShow = true |
| 34 | 36 | } |
| 37 | + const barArr = ['home','/solution','/enterprise'] | |
| 38 | + const compare = barArr.indexOf(to.path) > barArr.indexOf(from.path) | |
| 39 | + this.transitionName = compare ? 'transitionLeft' : 'transitionRight' | |
| 35 | 40 | } |
| 36 | 41 | } |
| 37 | 42 | } |
| ... | ... | @@ -51,4 +56,17 @@ export default { |
| 51 | 56 | .main-wrap{ |
| 52 | 57 | flex: 1; |
| 53 | 58 | } |
| 59 | + .transitionBody{ | |
| 60 | + transition: all .4s ease-out; | |
| 61 | + } | |
| 62 | + .transitionLeft-enter, | |
| 63 | + .transitionRight-leave-active { | |
| 64 | + transform: translate(100%, 0); | |
| 65 | + -webkit-transform: translate(100%, 0); | |
| 66 | + } | |
| 67 | + .transitionLeft-leave-active, | |
| 68 | + .transitionRight-enter { | |
| 69 | + transform: translate(-100%, 0); | |
| 70 | + -webkit-transform: translate(-100%, 0); | |
| 71 | + } | |
| 54 | 72 | </style> | ... | ... |
webintroduce/src/assets/css/reset.css
| ... | ... | @@ -48,7 +48,7 @@ body { |
| 48 | 48 | /*}*/ |
| 49 | 49 | |
| 50 | 50 | html, body{ |
| 51 | - height: 100%;width: 100%; | |
| 51 | + width: 100%; | |
| 52 | 52 | font-family: "Microsoft YaHei"; |
| 53 | 53 | color: #fff; |
| 54 | 54 | user-select: none; |
| ... | ... | @@ -58,8 +58,6 @@ html, body{ |
| 58 | 58 | -moz-user-select: none; |
| 59 | 59 | } |
| 60 | 60 | body{ |
| 61 | - | |
| 62 | - overflow: hidden; | |
| 63 | 61 | font-size: 14px; |
| 64 | 62 | /*默认颜色*/ |
| 65 | 63 | } | ... | ... |
webintroduce/src/main.js
| ... | ... | @@ -9,28 +9,33 @@ Vue.config.productionTip = false |
| 9 | 9 | |
| 10 | 10 | router.beforeEach((to, from, next) =>{ |
| 11 | 11 | |
| 12 | - if(to.matched.some(record => record.meta.requiresAuth)){ | |
| 13 | - if(Cookies.get('username')){ | |
| 14 | - document.title = to.meta.title | |
| 15 | - next() | |
| 16 | - }else{ | |
| 17 | - next({ | |
| 18 | - path:'/login', | |
| 19 | - query: { redirect: to.fullPath } | |
| 20 | - }) | |
| 21 | - document.title = '登录' | |
| 22 | - } | |
| 23 | - | |
| 24 | - | |
| 25 | - }else { | |
| 26 | - document.title = to.meta.title | |
| 27 | - next() | |
| 28 | - } | |
| 29 | - | |
| 12 | + // if(to.matched.some(record => record.meta.requiresAuth)){ | |
| 13 | + // if(Cookies.get('username')){ | |
| 14 | + // document.title = to.meta.title | |
| 15 | + // next() | |
| 16 | + // }else{ | |
| 17 | + // alert() | |
| 18 | + // next({ | |
| 19 | + // path:'/login', | |
| 20 | + // query: { redirect: to.fullPath } | |
| 21 | + // }) | |
| 22 | + // document.title = '登录' | |
| 23 | + // } | |
| 24 | + // | |
| 25 | + // | |
| 26 | + // }else { | |
| 27 | + // document.title = to.meta.title | |
| 28 | + // next() | |
| 29 | + // } | |
| 30 | + document.title = to.meta.title | |
| 31 | + next() | |
| 30 | 32 | // console.log(to) |
| 31 | 33 | // |
| 32 | 34 | // next() |
| 33 | 35 | }) |
| 36 | +router.afterEach((to,from,next) => { | |
| 37 | + window.scrollTo(0,0) | |
| 38 | +}) | |
| 34 | 39 | |
| 35 | 40 | /* eslint-disable no-new */ |
| 36 | 41 | new Vue({ | ... | ... |
webintroduce/src/views/enterprise.vue
webintroduce/src/views/home.vue