MOBILE-3594 core: Add animations class

package-lock.json

@@ -390,6 +390,14 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.0.1.tgz",
+      "integrity": "sha512-RS2ZsO3yidn/dMAllR+V0EX5BOQLQDi5s2kvd4wANHYAkU/yVXWKl09nbe8LTwLVH+iOYX7AAcAUUokQPEEHxQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/cli": {
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.0.8.tgz",
@@ -6514,7 +6522,7 @@
       "integrity": "sha512-EYC5eQFVkoYXq39l7tYKE6lEjHJ04mvTmKXxGL7quHLdFPfJMNzru/UYpn92AOfpl3PQaZmou78C7EgmFOwFQQ=="
     },
     "cordova-plugin-wkuserscript": {
-      "version": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git#aa77d0f98a3fb106f2e798e5adf5882f01a2c947",
+      "version": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git#6413f4bb3c2565f353e690b5c1450b69ad9e860e",
       "from": "git+https://github.com/moodlemobile/cordova-plugin-wkuserscript.git"
     },
     "cordova-plugin-wkwebview-cookies": {

package.json

@@ -32,6 +32,7 @@
     "ionic:build:before": "npx gulp"
   },
   "dependencies": {
+    "@angular/animations": "^11.0.1",
     "@angular/common": "~10.0.0",
     "@angular/core": "~10.0.0",
     "@angular/forms": "~10.0.0",

src/app/app.module.ts

@@ -14,6 +14,7 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouteReuseStrategy } from '@angular/router';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 
@@ -38,6 +39,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
     entryComponents: [],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         IonicModule.forRoot(),
         HttpClientModule, // HttpClient is used to make JSON requests. It fails for HEAD requests because there is no content.
         TranslateModule.forRoot({

src/core/classes/animations.ts

@@ -0,0 +1,65 @@
+// (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 { trigger, style, transition, animate, keyframes } from '@angular/animations';
+
+export const coreShowHideAnimation = trigger('coreShowHideAnimation', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('500ms ease-in-out', style({ opacity: 1 })),
+    ]),
+    transition(':leave', [
+        style({ opacity: 1 }),
+        animate('500ms ease-in-out', style({ opacity: 0 })),
+    ]),
+]);
+
+export const coreSlideInOut = 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 }),
+        ])),
+    ]),
+    // 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 }),
+        ])),
+    ]),
+    // Enter animation.
+    transition('void => fromRight', [
+        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 }),
+        ])),
+    ]),
+    // 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 }),
+        ])),
+    ]),
+]);

src/core/components/download-refresh/core-download-refresh.html

@@ -1,13 +1,13 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
-        class="core-animate-show-hide" [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
+        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
         <ion-icon slot="icon-only" name="cloud-download"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" color="dark" class="core-animate-show-hide"
+        (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
         attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fas-redo-alt"></ion-icon>
     </ion-button>
@@ -17,9 +17,9 @@
         color="success" name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate"
         role="status"></ion-icon>
 
-    <ion-spinner *ngIf="status === statusDownloading" class="core-animate-show-hide"
+    <ion-spinner *ngIf="status === statusDownloading" [@coreShowHideAnimation]
         [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>
 </ng-container>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" class="core-animate-show-hide" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="'core.loading' | translate"></ion-spinner>

src/core/components/download-refresh/download-refresh.ts

@@ -14,6 +14,7 @@
 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CoreConstants } from '@/core/constants';
+import { coreShowHideAnimation } from '@classes/animations';
 
 /**
  * Component to show a download button with refresh option, the spinner and the status of it.
@@ -25,6 +26,7 @@ import { CoreConstants } from '@/core/constants';
     selector: 'core-download-refresh',
     templateUrl: 'core-download-refresh.html',
     styleUrls: ['download-refresh.scss'],
+    animations: [coreShowHideAnimation],
 })
 export class CoreDownloadRefreshComponent {
 

src/core/components/loading/core-loading.html

@@ -1,10 +1,10 @@
-<div class="core-loading-container" *ngIf="!hideUntil" role="status"> <!-- @todo [@coreShowHideAnimation]  -->
+<div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]>
     <span class="core-loading-spinner">
         <ion-spinner color="primary"></ion-spinner>
         <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
     </span>
 </div>
-<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil">
+<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil" [@coreShowHideAnimation]>
     <ng-content *ngIf="hideUntil">
-    </ng-content> <!-- @todo [@coreShowHideAnimation]  -->
+    </ng-content>
 </div>

src/core/components/loading/loading.ts

@@ -17,6 +17,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRe
 import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events';
 import { CoreUtils } from '@services/utils/utils';
 import { Translate } from '@singletons/core.singletons';
+import { coreShowHideAnimation } from '@classes/animations';
 
 /**
  * Component to show a loading spinner and message while data is being loaded.
@@ -42,7 +43,7 @@ import { Translate } from '@singletons/core.singletons';
     selector: 'core-loading',
     templateUrl: 'core-loading.html',
     styleUrls: ['loading.scss'],
-    // @todo animations: [coreShowHideAnimation],
+    animations: [coreShowHideAnimation],
 })
 export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {