mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-20 08:33:11 +00:00
104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
/*
|
|
* Copyright (C) 2021 StApps
|
|
* This program is free software: you can redistribute it and/or modify it
|
|
* under the terms of the GNU General Public License as published by the Free
|
|
* Software Foundation, version 3.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but WITHOUT
|
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
|
* more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License along with
|
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
import {
|
|
animate,
|
|
sequence,
|
|
state,
|
|
style,
|
|
transition,
|
|
trigger,
|
|
} from '@angular/animations';
|
|
|
|
/**
|
|
* Fade transition
|
|
*
|
|
* @see {@link https://material.io/design/motion/the-motion-system.html#fade}
|
|
*/
|
|
export const materialFade = trigger('materialFade', [
|
|
state('in', style({opacity: 1})),
|
|
transition(':enter', [style({opacity: 0}), animate('250ms ease')]),
|
|
transition(':leave', [animate('200ms ease', style({opacity: 0}))]),
|
|
]);
|
|
|
|
/**
|
|
* Fade transition
|
|
*
|
|
* @see {@link https://material.io/design/motion/the-motion-system.html#fade}
|
|
*/
|
|
export const materialManualFade = trigger('materialManualFade', [
|
|
state('in', style({opacity: 1})),
|
|
state('out', style({opacity: 0})),
|
|
transition('in => out', animate('200ms ease')),
|
|
transition('out => in', animate('250ms ease')),
|
|
]);
|
|
|
|
/**
|
|
* Fade through transition
|
|
*
|
|
* @see {@link https://material.io/design/motion/the-motion-system.html#fade-through}
|
|
*/
|
|
export const materialFadeThrough = trigger('materialFadeThrough', [
|
|
state('in', style({transform: 'scale(100%)', opacity: 1})),
|
|
transition(':enter', [
|
|
style({transform: 'scale(80%)', opacity: 0}),
|
|
animate('250ms ease'),
|
|
]),
|
|
transition(':leave', [animate('200ms ease', style({opacity: 0}))]),
|
|
]);
|
|
|
|
export const SHARED_AXIS_DIRECTIONS = {
|
|
[-1]: 'go-backward',
|
|
[0]: 'in',
|
|
[1]: 'go-forward',
|
|
};
|
|
|
|
/**
|
|
* Shared axis transition along the X-Axis
|
|
*
|
|
* Needs to be manually choreographed
|
|
*
|
|
* @see {@link https://material.io/design/motion/the-motion-system.html#shared-axis}
|
|
* @see {SharedAxisChoreographer}
|
|
*/
|
|
export const materialSharedAxisX = trigger('materialSharedAxisX', [
|
|
state(
|
|
SHARED_AXIS_DIRECTIONS[-1],
|
|
style({opacity: 0, transform: 'translateX(30px)'}),
|
|
),
|
|
state(
|
|
SHARED_AXIS_DIRECTIONS[0],
|
|
style({opacity: 1, transform: 'translateX(0px)'}),
|
|
),
|
|
state(
|
|
SHARED_AXIS_DIRECTIONS[1],
|
|
style({opacity: 0, transform: 'translateX(-30px)'}),
|
|
),
|
|
transition(
|
|
`${SHARED_AXIS_DIRECTIONS[-1]} => ${SHARED_AXIS_DIRECTIONS[0]}`,
|
|
sequence([
|
|
style({opacity: 0, transform: 'translateX(-30px)'}),
|
|
animate('100ms ease-out'),
|
|
]),
|
|
),
|
|
transition(`${SHARED_AXIS_DIRECTIONS[0]} => *`, animate('100ms ease-out')),
|
|
transition(
|
|
`${SHARED_AXIS_DIRECTIONS[1]} => ${SHARED_AXIS_DIRECTIONS[0]}`,
|
|
sequence([
|
|
style({opacity: 0, transform: 'translateX(30px)'}),
|
|
animate('100ms ease-out'),
|
|
]),
|
|
),
|
|
]);
|