Better page transition

This commit is contained in:
syuilo 2020-02-08 11:33:32 +09:00
parent a509045b25
commit d0d3b70c73

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 {