forked from CIT/Vmeda.Online
MOBILE-3320 core: Move animation helpers
This commit is contained in:
Noel De Martin
parent
6d1d4a34ce
commit
012d211d10
@ -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 }),
|
||||
])),
|
||||
]),
|
||||
]);
|
||||
72
src/core/components/animations.ts
Normal file
72
src/core/components/animations.ts
Normal file
@ -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 }),
|
||||
])),
|
||||
]),
|
||||
]);
|
||||
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user