import { trigger , transition , state , group , query , style , animate , animateChild } from '@angular/animations' ; export const routeAnimation = trigger ( 'routeAnimation' , [ transition ( '* <=> *' , [ query ( ':enter' , style ( { position : 'fixed' , width : '100%' , transform : 'translateX(-100%)' , } ) , { optional : true } ) , query ( ':leave' , animate ( '500ms ease' , style ( { position : 'fixed' , width : '100%' , transform : 'translateX(100%)' , } ) ) , { optional : true , } ) , query ( ':enter' , animate ( '500ms ease' , style ( { opacity : 1 , transform : 'translateX(0%)' } ) ) , { optional : true } ) , ] ) , ] ) ; export const hierarchicalRouteAnimation = trigger ( 'routeAnimation' , [ transition ( ':increment' , [ style ( { height : '!' } ) , query ( ':enter' , style ( { transform : 'translateX(100%)' } ) , { optional : true } ) , query ( ':enter, :leave' , style ( { position : 'absolute' , top : 0 , left : 0 , right : 0 } ) , { optional : true } ) , group ( [ query ( ':leave' , [ animate ( '500ms ease-in-out' , style ( { transform : 'translateX(-100%)' } ) ) ] , { optional : true , } ) , query ( ':enter' , animate ( '500ms ease-in-out' , style ( { transform : 'translateX(0)' } ) ) , { optional : true , } ) , ] ) , ] ) , transition ( ':decrement' , [ style ( { height : '!' } ) , query ( ':enter' , style ( { transform : 'translateX(-100%)' } ) , { optional : true } ) , query ( ':enter, :leave' , style ( { position : 'absolute' , top : 0 , left : 0 , right : 0 } ) , { optional : true } ) , group ( [ query ( ':leave' , [ animate ( '500ms ease-in-out' , style ( { transform : 'translateX(100%)' } ) ) ] , { optional : true , } ) , query ( ':enter' , animate ( '500ms ease-in-out' , style ( { transform : 'translateX(0)' } ) ) , { optional : true , } ) , ] ) , ] ) , ] ) ;