TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 11:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: chore(ci): test nx

Browse Source
This commit is contained in:
Florian Forster
2025-07-30 16:05:36 -07:00
parent 82e4466928
commit 74efccb9cc
2799 changed files with 2067 additions and 2971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
apps/console/src/app/animations.ts Normal file
View File

@@ -0,0 +1,191 @@
import {
animate,
animateChild,
AnimationTriggerMetadata,
group,
query,
stagger,
style,
transition,
trigger,
} from '@angular/animations';
export const toolbarAnimation: AnimationTriggerMetadata = trigger('toolbar', [
transition(':enter', [
style({
transform: 'translateY(-100%)',
opacity: 0,
}),
animate(
'.2s ease-out',
style({
transform: 'translateY(0%)',
opacity: 1,
}),
),
]),
]);
export const adminLineAnimation: AnimationTriggerMetadata = trigger('adminline', [
transition(':enter', [
style({
transform: 'translateY(100%)',
opacity: 0.5,
}),
animate(
'.2s ease-out',
style({
transform: 'translateY(0%)',
opacity: 1,
}),
),
]),
]);
export const accountCard: AnimationTriggerMetadata = trigger('accounts', [
transition(':enter', [
style({
transform: 'scale(.9) translateY(-10%)',
height: '200px',
opacity: 0,
}),
animate(
'.1s ease-out',
style({
transform: 'scale(1) translateY(0%)',
height: '*',
opacity: 1,
}),
),
]),
]);
export const navAnimations: Array<AnimationTriggerMetadata> = [
trigger('navAnimation', [transition('* => *', [query('@navitem', stagger('50ms', animateChild()), { optional: true })])]),
trigger('navitem', [
transition(':enter', [
style({
opacity: 0,
}),
animate(
'.0s',
style({
opacity: 1,
}),
),
]),
transition(':leave', [
style({
opacity: 1,
}),
animate(
'.0s',
style({
opacity: 0,
}),
),
]),
]),
];
export const enterAnimations: Array<AnimationTriggerMetadata> = [
trigger('appearfade', [
transition(':enter', [
style({
transform: 'scale(.9) translateY(-10%)',
opacity: 0,
}),
animate(
'100ms ease-in-out',
style({
transform: 'scale(1) translateY(0%)',
opacity: 1,
}),
),
]),
transition(':leave', [
style({
transform: 'scale(1) translateY(0%)',
opacity: 1,
}),
animate(
'100ms ease-in-out',
style({
transform: 'scale(.9) translateY(-10%)',
opacity: 0,
}),
),
]),
]),
];
export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
transition('HomePage => AddPage', [
style({ transform: 'translateX(30vw)', opacity: 0 }),
animate('250ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 })),
]),
transition('AddPage => HomePage', [animate('250ms', style({ transform: 'translateX(30vw)', opacity: 0 }))]),
transition('HomePage => DetailPage', [
query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
optional: true,
}),
group([
query(
':enter',
[
style({
transform: 'translateX(20%)',
opacity: 0,
}),
animate(
'.35s ease-in',
style({
transform: 'translateX(0%)',
opacity: 1,
}),
),
],
{
optional: true,
},
),
query(':leave', [style({ opacity: 1, width: '100%' }), animate('.35s ease-out', style({ opacity: 0 }))], {
optional: true,
}),
]),
]),
transition('DetailPage => HomePage', [
query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
optional: true,
}),
group([
query(
':enter',
[
style({
opacity: 0,
}),
animate(
'.35s ease-out',
style({
opacity: 1,
}),
),
],
{
optional: true,
},
),
query(
':leave',
[
style({ width: '100%', transform: 'translateX(0%)' }),
animate('.35s ease-in', style({ transform: 'translateX(30%)', opacity: 0 })),
],
{
optional: true,
},
),
]),
]),
]);