FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

Revert "Better page transition"

Browse source 
This reverts commit d0d3b70c73.
This commit is contained in:
syuilo 2020-02-08 11:54:39 +09:00
parent d0d3b70c73
commit 023e0ba7aa
1 changed files with 14 additions and 35 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" :class="{ backward: isBack, forward: !isBack }"> <div class="content">
<transition :name="$store.state.device.animation ? isIndexRelatedNavigate ? 'index' : 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.device.animation ? '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,8 +169,6 @@ 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
}; };
@ -211,12 +209,6 @@ 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);
@ -612,6 +604,18 @@ 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;
@ -897,31 +901,6 @@ 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 {