You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
781 B
TypeScript
27 lines
781 B
TypeScript
import { animate, keyframes, style, transition, trigger } from '@angular/animations';
|
|
|
|
export const opacityAnimation = [
|
|
trigger('opacityAnimation', [
|
|
transition(':enter', [
|
|
style({ opacity: 0 }),
|
|
animate('1000ms ease-in', style({ opacity: 1 }))
|
|
]),
|
|
transition(':leave', [
|
|
animate('0ms', style({ opacity: 0 }))
|
|
])
|
|
])
|
|
];
|
|
|
|
export const fadeIn = [
|
|
trigger('fadeIn', [
|
|
transition('void => *', []), // When the item is created
|
|
transition('* => void', []), // When the item is removed
|
|
transition('* => *', [ // When the item is changed
|
|
animate(800, keyframes([ // Animate for 800 ms
|
|
style({ opacity: 0, transform: 'translateY(100%)' }),
|
|
style({ opacity: 1, transform: 'translateY(0%)' })
|
|
]))
|
|
])
|
|
])
|
|
];
|