I'm working on creating a dynamic Homepage in Angular 4 with various cards such as stats, charts, etc., all enhanced with animations. One interesting feature I've implemented is the ability to toggle chart cards to expand to full screen by clicking an icon button. The animation code I currently have looks like this:
state('small', style({position: 'relative', width: '50%'})),
state('large', style({
transform: 'translateY(-150px)',
position: 'absolute',
width: '100%'
})),
transition('small => large', animate('600ms ease', keyframes([
style({position: 'absolute', width: '100%', offset: 0}),
style({transform: 'translateY(-150px)', offset: 1.0}),
]))),
transition('large => small', animate('600ms ease', keyframes([
style({transform: 'translateY(-150px)', offset: 0}),
style({width: '50%', right: 0, offset: 1.0}),
])))
However, this implementation doesn't behave as expected. The width animation is missing during the first step (small => lage), and the translate effect is absent during the reverse animation. I've been trying different approaches for days to achieve a smoother transition without success.
You can check out a quick plunkr demo I created to showcase what I've attempted so far (please don't judge my initial attempts x).
Any help or suggestions would be greatly appreciated! Thanks!