diff --git a/src/core/classes/animations.ts b/src/core/classes/animations.ts deleted file mode 100644 index 510ef6d88..000000000 --- a/src/core/classes/animations.ts +++ /dev/null @@ -1,65 +0,0 @@ -// (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 }), - ])), - ]), -]); diff --git a/src/core/components/animations.ts b/src/core/components/animations.ts new file mode 100644 index 000000000..355386230 --- /dev/null +++ b/src/core/components/animations.ts @@ -0,0 +1,72 @@ +// (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'; + +/** + * Defines core animations. + */ +export class CoreAnimations { + + static readonly SHOW_HIDE = 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 })), + ]), + ]); + + 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 }), + ])), + ]), + // 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 }), + ])), + ]), + ]); + +} diff --git a/src/core/components/download-refresh/download-refresh.ts b/src/core/components/download-refresh/download-refresh.ts index 820a4d93c..3aed6b4c6 100644 --- a/src/core/components/download-refresh/download-refresh.ts +++ b/src/core/components/download-refresh/download-refresh.ts @@ -14,7 +14,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; import { CoreConstants } from '@/core/constants'; -import { coreShowHideAnimation } from '@classes/animations'; +import { CoreAnimations } from '@components/animations'; /** * Component to show a download button with refresh option, the spinner and the status of it. @@ -26,7 +26,7 @@ import { coreShowHideAnimation } from '@classes/animations'; selector: 'core-download-refresh', templateUrl: 'core-download-refresh.html', styleUrls: ['download-refresh.scss'], - animations: [coreShowHideAnimation], + animations: [CoreAnimations.SHOW_HIDE], }) export class CoreDownloadRefreshComponent { diff --git a/src/core/components/loading/loading.ts b/src/core/components/loading/loading.ts index 51442cfbb..f40623dbf 100644 --- a/src/core/components/loading/loading.ts +++ b/src/core/components/loading/loading.ts @@ -16,7 +16,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRe import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events'; import { CoreUtils } from '@services/utils/utils'; -import { coreShowHideAnimation } from '@classes/animations'; +import { CoreAnimations } from '@components/animations'; import { Translate } from '@singletons'; /** @@ -43,7 +43,7 @@ import { Translate } from '@singletons'; selector: 'core-loading', templateUrl: 'core-loading.html', styleUrls: ['loading.scss'], - animations: [coreShowHideAnimation], + animations: [CoreAnimations.SHOW_HIDE], }) export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {