添加转卖动画
This commit is contained in:
zyronon
parent
1fdcaeb56e
commit
de74c9d1d7
5
package-lock.json
generated
5
package-lock.json
generated
@ -12965,6 +12965,11 @@
|
||||
"animate.css": "^3.7.0"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
|
||||
"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"pinyin": "^2.9.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.7",
|
||||
"vueg": "^1.4.5"
|
||||
"vuex": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
|
||||
80
src/App.vue
80
src/App.vue
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<transition name="slide-fade">
|
||||
<transition :name="$store.state.pageAnim">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
@ -10,22 +10,24 @@
|
||||
export default {
|
||||
name: 'app',
|
||||
data() {
|
||||
return {
|
||||
transitionName: 'fold-left'
|
||||
}
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
//此时假设从index页面跳转到pointList页面
|
||||
// console.log(to) // "/pointList"
|
||||
// console.log(from) // “/index”
|
||||
// if (to.path === '/me') {
|
||||
// this.transitionName = 'fold-right'
|
||||
// } else {
|
||||
// this.transitionName = 'fold-left'
|
||||
// }
|
||||
$route(to, from) {
|
||||
let rootRouters = ['/', '/home', '/attention', '/message', '/me']
|
||||
if (rootRouters.indexOf(to.path) !== -1 && rootRouters.indexOf(from.path) !== -1) {
|
||||
this.$store.commit('setPageAnim', 'none')
|
||||
return
|
||||
}
|
||||
let routers = ['/', '/home', '/attention', '/message', '/me', '/myCard', '/chooseCountry']
|
||||
//根据路由层次来决定转场效果
|
||||
if (routers.indexOf(to.path) > routers.indexOf(from.path)) {
|
||||
this.$store.commit('setPageAnim', 'go')
|
||||
} else {
|
||||
this.$store.commit('setPageAnim', 'back')
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -35,17 +37,47 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 可以设置不同的进入和离开动画 */
|
||||
/* 设置持续时间和动画函数 */
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
|
||||
.go-enter {
|
||||
left: 100%;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
|
||||
.go-enter-to {
|
||||
left: 0;
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to
|
||||
/* .slide-fade-leave-active for below version 2.1.8 */ {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
|
||||
.go-leave {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.go-leave-to {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.go-enter-active, .go-leave-active {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
|
||||
.back-enter {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.back-enter-to {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.back-leave {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.back-leave-to {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.back-enter-active, .back-leave-active {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id='BaseHeader'>
|
||||
<svg v-if="isShowLeftBtn" @click="$emit('back')" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
|
||||
<svg v-if="isShowLeftBtn" @click="back()" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="16292" width="32" height="32">
|
||||
@ -36,7 +36,12 @@
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
methods: {
|
||||
back(){
|
||||
this.$store.commit('setPageAnim','back')
|
||||
window.history.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
17
src/main.js
17
src/main.js
@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import Icon from 'vue-svg-icon/Icon.vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import vueg from 'vueg'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import './assets/scss/index.scss'
|
||||
import Index from './pages/home/Index'
|
||||
@ -21,6 +21,7 @@ Vue.config.productionTip = false
|
||||
Vue.component('icon', Icon)
|
||||
Vue.component('BaseHeader', BaseHeader)
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(Vuex)
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
@ -36,7 +37,17 @@ const router = new VueRouter({
|
||||
{ path: '/myCard', component: MyCard },
|
||||
]
|
||||
})
|
||||
Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
pageAnim: 'none'
|
||||
},
|
||||
mutations: {
|
||||
setPageAnim(state, states) {
|
||||
state.pageAnim = states
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Vue.mixin({
|
||||
methods: {
|
||||
@ -63,7 +74,9 @@ Vue.mixin({
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
store,
|
||||
router
|
||||
}).$mount('#app')
|
||||
|
||||
@ -97,12 +97,12 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
#attention {
|
||||
position: fixed;
|
||||
/*background: rgb(22，24，34);*/
|
||||
/*background: #161822;*/
|
||||
//抖音原色，感觉很暗
|
||||
background: #2e3244;
|
||||
color: #b8b9c1;
|
||||
position: relative;
|
||||
.items {
|
||||
>.item {
|
||||
border-bottom: 1px solid #494950;
|
||||
|
||||
@ -397,6 +397,7 @@
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#home-index {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@ -677,6 +677,7 @@
|
||||
$left-bg-color: #333;
|
||||
$right-bg-color: #2e3244;
|
||||
.Me {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="header pt15p">
|
||||
<div class="title">
|
||||
<p class="tac fb c-white ">消息</p>
|
||||
<span>联系人</span>
|
||||
<span @click="nav('/myCard')">联系人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt20p"></div>
|
||||
@ -82,10 +82,12 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
#Message {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
background: #2e3244;
|
||||
color: #b8b9c1;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
|
||||
.header {
|
||||
.title {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id='MyCard'>
|
||||
<BaseHeader @back="back">
|
||||
<BaseHeader >
|
||||
<svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="15320" width="32" height="32">
|
||||
@ -31,7 +31,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@ -47,18 +46,16 @@
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
back() {
|
||||
window.history.back()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
#MyCard {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user