You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
74 lines
2.0 KiB
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
import { TreoAnimationCurves, TreoAnimationDurations } from '@treo/animations/defaults';
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Zoom in
|
|
// -----------------------------------------------------------------------------------------------------
|
|
const zoomIn = trigger('zoomIn',
|
|
[
|
|
|
|
state('void',
|
|
style({
|
|
opacity : 0,
|
|
transform: 'scale(0.5)'
|
|
})
|
|
),
|
|
|
|
state('*',
|
|
style({
|
|
opacity : 1,
|
|
transform: 'scale(1)'
|
|
})
|
|
),
|
|
|
|
// Prevent the transition if the state is false
|
|
transition('void => false', []),
|
|
|
|
// Transition
|
|
transition('void => *', animate('{{timings}}'),
|
|
{
|
|
params: {
|
|
timings: `${TreoAnimationDurations.ENTERING} ${TreoAnimationCurves.DECELERATION_CURVE}`
|
|
}
|
|
}
|
|
)
|
|
]
|
|
);
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Zoom out
|
|
// -----------------------------------------------------------------------------------------------------
|
|
const zoomOut = trigger('zoomOut',
|
|
[
|
|
|
|
state('*',
|
|
style({
|
|
opacity : 1,
|
|
transform: 'scale(1)'
|
|
})
|
|
),
|
|
|
|
state('void',
|
|
style({
|
|
opacity : 0,
|
|
transform: 'scale(0.5)'
|
|
})
|
|
),
|
|
|
|
// Prevent the transition if the state is false
|
|
transition('false => void', []),
|
|
|
|
// Transition
|
|
transition('* => void', animate('{{timings}}'),
|
|
{
|
|
params: {
|
|
timings: `${TreoAnimationDurations.EXITING} ${TreoAnimationCurves.ACCELERATION_CURVE}`
|
|
}
|
|
}
|
|
)
|
|
]
|
|
);
|
|
|
|
export { zoomIn, zoomOut };
|
|
|