ltlapy/iceshrimp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "Better page transition"

Browse source 
This reverts commit d0d3b70c73b06f70f0230ef624ccc6182ef15144.
This commit is contained in:
syuilo 2020-02-08 11:54:39 +09:00
parent 1cd757edcf
commit e1c1c3d76f
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 {