|
|
|
@ -1,8 +1,11 @@ |
|
|
|
import { animate, animation, style } from '@angular/animations'; |
|
|
|
|
|
|
|
export const fadeIn = animation([style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], { |
|
|
|
params: { time: '350ms', easing: 'ease' }, |
|
|
|
}); |
|
|
|
export const fadeIn = animation( |
|
|
|
[style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], |
|
|
|
{ |
|
|
|
params: { time: '350ms', easing: 'ease' }, |
|
|
|
}, |
|
|
|
); |
|
|
|
|
|
|
|
export const fadeOut = animation( |
|
|
|
[style({ opacity: '1' }), animate('{{ time}} {{ easing }}', style({ opacity: '0' }))], |
|
|
|
@ -12,7 +15,10 @@ export const fadeOut = animation( |
|
|
|
export const fadeInDown = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateY(0)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -20,7 +26,10 @@ export const fadeInDown = animation( |
|
|
|
export const fadeInUp = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateY(0)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -28,7 +37,10 @@ export const fadeInUp = animation( |
|
|
|
export const fadeInLeft = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateX(0)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -36,7 +48,10 @@ export const fadeInLeft = animation( |
|
|
|
export const fadeInRight = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateX(0)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -44,7 +59,10 @@ export const fadeInRight = animation( |
|
|
|
export const fadeOutDown = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateY(0)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -52,7 +70,10 @@ export const fadeOutDown = animation( |
|
|
|
export const fadeOutUp = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateY(0)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -60,7 +81,10 @@ export const fadeOutUp = animation( |
|
|
|
export const fadeOutLeft = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateX(0)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
@ -68,7 +92,10 @@ export const fadeOutLeft = animation( |
|
|
|
export const fadeOutRight = animation( |
|
|
|
[ |
|
|
|
style({ opacity: '1', transform: '{{ transform }} translateX(0)' }), |
|
|
|
animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' })), |
|
|
|
animate( |
|
|
|
'{{ time }} {{ easing }}', |
|
|
|
style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }), |
|
|
|
), |
|
|
|
], |
|
|
|
{ params: { time: '350ms', easing: 'ease', transform: '' } }, |
|
|
|
); |
|
|
|
|