import { trigger , state , animate , style , transition , query , group , keyframes } from '@angular/animations' ; import { colors } from '../services/constants.service' ; export const mainRouterTransition = trigger ( 'mainRouterTransition' , [ state ( '*' , style ( { position : 'fixed' , width : '100%' , height : 'calc(100vh - 100px)' } ) ) , transition ( '* => leftState' , [ query ( ':enter, :leave' , style ( { position : 'fixed' , width : '100%' , height : 'calc(100vh - 100px)' } ) , { optional : true } ) , group ( [ query ( ':enter' , [ style ( { transform : 'translateX(-100%)' } ) , animate ( '.6s ease-in-out' , style ( { transform : 'translateX(0%)' } ) ) ] , { optional : true } ) , query ( ':leave' , [ style ( { transform : 'translateX(0%)' } ) , animate ( '.5s ease-in-out' , style ( { transform : 'translateX(100%)' } ) ) ] , { optional : true } ) ] ) ] ) , transition ( '* => rightState' , [ query ( ':enter, :leave' , style ( { position : 'fixed' , width : '100%' , height : 'calc(100vh - 100px)' } ) , { optional : true } ) , group ( [ query ( ':enter' , [ style ( { transform : 'translateX(100%)' } ) , animate ( '.6s ease-in-out' , style ( { transform : 'translateX(0%)' } ) ) ] , { optional : true } ) , query ( ':leave' , [ style ( { transform : 'translateX(0%)' } ) , animate ( '.5s ease-in-out' , style ( { transform : 'translateX(-100%)' } ) ) ] , { optional : true } ) ] ) ] ) ] ) ; export const loginRouterTransition = trigger ( 'loginRouterTransition' , [ state ( 'in' , style ( { 'width' : '38em' } ) ) , state ( 'out' , style ( { 'width' : '0em' } ) ) , transition ( 'in <=> out' , animate ( '200ms ease-in-out' ) ) ] ) ; export const changeTextColor = trigger ( 'changeTextColor' , [ state ( 'pink' , style ( { color : '#e20074' } ) ) , transition ( '* <=> pink' , animate ( '400ms ease-in-out' ) ) ] ) ; export const changeUnderlineColor = trigger ( 'changeUnderlineColor' , [ state ( 'pink' , style ( { 'border-color' : '#e20074' } ) ) , transition ( '* <=> pink' , animate ( '400ms ease-in-out' ) ) ] ) ; export const fadeInOut = trigger ( 'fadeInOut' , [ state ( 'show' , style ( { opacity : '1' , } ) ) , state ( 'hide' , style ( { opacity : '0' } ) ) , transition ( 'show <=> hide' , animate ( '200ms ease-in-out' ) ) ] ) ;