MOBILE-3320 core: Modal lateral transition animation

src/app/app.module.ts

@@ -21,7 +21,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { IonicModule, IonicRouteStrategy, iosTransitionAnimation } from '@ionic/angular';
 
 import { CoreModule } from '@/core/core.module';
 import { AddonsModule } from '@/addons/addons.module';
@@ -42,7 +42,11 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
-        IonicModule.forRoot(),
+        IonicModule.forRoot(
+            {
+                navAnimation: iosTransitionAnimation,
+            },
+        ),
         HttpClientModule, // HttpClient is used to make JSON requests. It fails for HEAD requests because there is no content.
         TranslateModule.forRoot({
             loader: {

src/core/classes/modal-lateral-transition.ts

@@ -0,0 +1,58 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createAnimation } from '@ionic/angular';
+import { Animation } from '@ionic/core';
+import { Platform } from '@singletons';
+
+/**
+ * Sliding transition for lateral modals.
+ */
+export function CoreModalLateralTransitionEnter(baseEl: HTMLElement): Animation {
+    const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
+
+    const backdropAnimation = createAnimation()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', 0.01, 0.4);
+
+    const wrapperAnimation = createAnimation()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)')
+        .fromTo('opacity', 0.8, 1);
+
+    return createAnimation()
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .duration(300)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+}
+
+export function CoreModalLateralTransitionLeave(baseEl: HTMLElement): Animation {
+    const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
+
+    const backdropAnimation = createAnimation()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', 0.4, 0.0);
+
+    const wrapperAnimation = createAnimation()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .beforeStyles({ opacity: 1 })
+        .fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
+
+    return createAnimation()
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .duration(300)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+}

src/core/services/utils/dom.ts

@@ -37,6 +37,7 @@ import { CoreNetworkError } from '@classes/errors/network-error';
 import { CoreBSTooltipComponent } from '@components/bs-tooltip/bs-tooltip';
 import { CoreViewerImageComponent } from '@features/viewer/components/image/image';
 import { CoreFormFields, CoreForms } from '../../singletons/form';
+import { CoreModalLateralTransitionEnter, CoreModalLateralTransitionLeave } from '@classes/modal-lateral-transition';
 
 /*
  * "Utils" service with helper functions for UI, DOM elements and HTML code.
@@ -1721,8 +1722,8 @@ export class CoreDomUtilsProvider {
             cssClass: 'core-modal-lateral',
             showBackdrop: true,
             backdropDismiss: true,
-            // @todo enterAnimation: 'core-modal-lateral-transition',
-            // @todo leaveAnimation: 'core-modal-lateral-transition',
+            enterAnimation: CoreModalLateralTransitionEnter,
+            leaveAnimation: CoreModalLateralTransitionLeave,
         });
 
         return await this.openModal<T>(modalOptions);