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.
35 lines
1.1 KiB
35 lines
1.1 KiB
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
import { TreoAnimationCurves, TreoAnimationDurations } from '@treo/animations/defaults';
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Expand / collapse
|
|
// -----------------------------------------------------------------------------------------------------
|
|
const expandCollapse = trigger('expandCollapse',
|
|
[
|
|
state('void, collapsed',
|
|
style({
|
|
height: '0'
|
|
})
|
|
),
|
|
|
|
state('*, expanded',
|
|
style('*')
|
|
),
|
|
|
|
// Prevent the transition if the state is false
|
|
transition('void <=> false, collapsed <=> false, expanded <=> false', []),
|
|
|
|
// Transition
|
|
transition('void <=> *, collapsed <=> expanded',
|
|
animate('{{timings}}'),
|
|
{
|
|
params: {
|
|
timings: `${TreoAnimationDurations.ENTERING} ${TreoAnimationCurves.DECELERATION_CURVE}`
|
|
}
|
|
}
|
|
)
|
|
]
|
|
);
|
|
|
|
export { expandCollapse };
|