Commit 7675bc90ea4a52ce1ddc9bf3b17f8db3ebe19081
1 parent
411f96a5
路由切换动画
Showing
5 changed files
with
53 additions
and
27 deletions
webintroduce/src/App.vue
| 1 | <template> | 1 | <template> |
| 2 | <div id="app"> | 2 | <div id="app"> |
| 3 | <VHeader v-if="headerShow"></VHeader> | 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 | <VFooter v-if="footerShow"></VFooter> | 9 | <VFooter v-if="footerShow"></VFooter> |
| 9 | </div> | 10 | </div> |
| 10 | </template> | 11 | </template> |
| @@ -21,7 +22,8 @@ export default { | @@ -21,7 +22,8 @@ export default { | ||
| 21 | data() { | 22 | data() { |
| 22 | return { | 23 | return { |
| 23 | footerShow: true, | 24 | footerShow: true, |
| 24 | - headerShow: true | 25 | + headerShow: true, |
| 26 | + transitionName: 'transitionLeft' | ||
| 25 | } | 27 | } |
| 26 | }, | 28 | }, |
| 27 | watch: { | 29 | watch: { |
| @@ -32,6 +34,9 @@ export default { | @@ -32,6 +34,9 @@ export default { | ||
| 32 | }else { | 34 | }else { |
| 33 | this.headerShow = this.footerShow = true | 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,4 +56,17 @@ export default { | ||
| 51 | .main-wrap{ | 56 | .main-wrap{ |
| 52 | flex: 1; | 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 | </style> | 72 | </style> |
webintroduce/src/assets/css/reset.css
| @@ -48,7 +48,7 @@ body { | @@ -48,7 +48,7 @@ body { | ||
| 48 | /*}*/ | 48 | /*}*/ |
| 49 | 49 | ||
| 50 | html, body{ | 50 | html, body{ |
| 51 | - height: 100%;width: 100%; | 51 | + width: 100%; |
| 52 | font-family: "Microsoft YaHei"; | 52 | font-family: "Microsoft YaHei"; |
| 53 | color: #fff; | 53 | color: #fff; |
| 54 | user-select: none; | 54 | user-select: none; |
| @@ -58,8 +58,6 @@ html, body{ | @@ -58,8 +58,6 @@ html, body{ | ||
| 58 | -moz-user-select: none; | 58 | -moz-user-select: none; |
| 59 | } | 59 | } |
| 60 | body{ | 60 | body{ |
| 61 | - | ||
| 62 | - overflow: hidden; | ||
| 63 | font-size: 14px; | 61 | font-size: 14px; |
| 64 | /*默认颜色*/ | 62 | /*默认颜色*/ |
| 65 | } | 63 | } |
webintroduce/src/main.js
| @@ -9,28 +9,33 @@ Vue.config.productionTip = false | @@ -9,28 +9,33 @@ Vue.config.productionTip = false | ||
| 9 | 9 | ||
| 10 | router.beforeEach((to, from, next) =>{ | 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 | // console.log(to) | 32 | // console.log(to) |
| 31 | // | 33 | // |
| 32 | // next() | 34 | // next() |
| 33 | }) | 35 | }) |
| 36 | +router.afterEach((to,from,next) => { | ||
| 37 | + window.scrollTo(0,0) | ||
| 38 | +}) | ||
| 34 | 39 | ||
| 35 | /* eslint-disable no-new */ | 40 | /* eslint-disable no-new */ |
| 36 | new Vue({ | 41 | new Vue({ |
webintroduce/src/views/enterprise.vue
webintroduce/src/views/home.vue
| @@ -4,6 +4,8 @@ | @@ -4,6 +4,8 @@ | ||
| 4 | :key="index" @click="toEnterprise(enterprise.id)"> | 4 | :key="index" @click="toEnterprise(enterprise.id)"> |
| 5 | {{enterprise.name}} | 5 | {{enterprise.name}} |
| 6 | </li> | 6 | </li> |
| 7 | + <div style="height: 800px;background-color: #000">shouye</div> | ||
| 8 | + <div style="height: 800px;background-color: #ccc">shouye</div> | ||
| 7 | </ul> | 9 | </ul> |
| 8 | </template> | 10 | </template> |
| 9 | 11 |