MOBILE-3320 messages: Fix animations on message screen

main
Pau Ferrer Ocaña 2021-06-09 16:44:59 +02:00
parent 84973e901c
commit 17d5c829a9
2 changed files with 12 additions and 9 deletions

View File

@ -163,9 +163,16 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
this.showInfo = !backViewPage || !CoreTextUtils.matchesGlob(backViewPage, '**/user/profile');
this.route.queryParams.subscribe(async (params) => {
this.loaded = false;
const oldConversationId = this.conversationId;
const oldUserId = this.userId;
this.conversationId = CoreNavigator.getRouteNumberParam('conversationId', { params }) || undefined;
this.userId = CoreNavigator.getRouteNumberParam('userId', { params }) || undefined;
if (oldConversationId != this.conversationId || oldUserId != this.userId) {
// Showing reload again can break animations.
this.loaded = false;
}
this.showKeyboard = CoreNavigator.getRouteBooleanParam('showKeyboard', { params }) || false;
await this.fetchData();

View File

@ -33,38 +33,34 @@ export class CoreAnimations {
static readonly SLIDE_IN_OUT = trigger('coreSlideInOut', [
// Enter animation.
transition('void => fromLeft', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate(300, keyframes([
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(5%)', offset: 0.7 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
])),
]),
// Leave animation.
transition('fromLeft => void', [
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate(300, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(5%)', offset: 0.3 }),
style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 }),
style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 }),
])),
]),
// Enter animation.
transition('void => fromRight', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate(300, keyframes([
style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.7 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
])),
]),
// Leave animation.
transition('fromRight => void', [
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate(300, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.3 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 }),
])),
]),
]);