yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Better page transition

Browse source
This commit is contained in:
syuilo 2020-02-08 11:33:32 +09:00
parent a509045b25
commit d0d3b70c73
1 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/client/app.vue
View file

@ -75,8 +75,8 @@
<div class="contents"> <div class="contents">
<main ref="main"> <main ref="main">
<div class="content"> <div class="content" :class="{ backward: isBack, forward: !isBack }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.device.animation ? isIndexRelatedNavigate ? 'index' : 'page' : ''" mode="out-in" @enter="onTransition">
<keep-alive :include="['index']"> <keep-alive :include="['index']">
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
@ -169,6 +169,8 @@ export default Vue.extend({
widgetsEditMode: false, widgetsEditMode: false,
enableWidgets: window.innerWidth >= 1100, enableWidgets: window.innerWidth >= 1100,
canBack: false, canBack: false,
isBack: false,
isIndexRelatedNavigate: false,
disconnectedDialog: null as Promise<void> | null, disconnectedDialog: null as Promise<void> | null,
faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
}; };
@ -209,6 +211,12 @@ export default Vue.extend({
}, },
created() { created() {
this.$router.beforeEach((to, from, next) => {
this.isBack = to.name === 'index';
this.isIndexRelatedNavigate = to.name === 'index' || from.name === 'index';
next();
});
if (this.$store.getters.isSignedIn) { if (this.$store.getters.isSignedIn) {
this.connection = this.$root.stream.useSharedConnection('main'); this.connection = this.$root.stream.useSharedConnection('main');
this.connection.on('notification', this.onNotification); this.connection.on('notification', this.onNotification);
@ -604,18 +612,6 @@ export default Vue.extend({
transform: scale(0.9); transform: scale(0.9);
} }
.page-enter-active, .page-leave-active {
transition: opacity 0.5s, transform 0.5s !important;
}
.page-enter {
opacity: 0;
transform: translateY(-32px);
}
.page-leave-to {
opacity: 0;
transform: translateY(32px);
}
.mk-app { .mk-app {
$header-height: 60px; $header-height: 60px;
$nav-width: 250px; $nav-width: 250px;
@ -901,6 +897,31 @@ export default Vue.extend({
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 8px; padding: 8px;
} }
::v-deep .index-enter-active, ::v-deep .index-leave-active,
::v-deep .page-enter-active, ::v-deep .page-leave-active {
transition: opacity 0.5s, transform 0.5s !important;
}
&.forward ::v-deep .page-enter {
opacity: 0;
transform: translateY(-32px);
}
&.forward ::v-deep .page-leave-to {
opacity: 0;
transform: translateY(32px);
}
&.forward ::v-deep .index-enter,
&.backward ::v-deep .index-leave-to {
opacity: 0;
transform: translateX(32px);
}
&.forward ::v-deep .index-leave-to,
&.backward ::v-deep .index-enter {
opacity: 0;
transform: translateX(-32px);
}
} }
> .powerd-by { > .powerd-by {