0

I'm trying to do a kind of Homepage in Angular 4 with different cards like stats, charts etc using some animations. For the chart cards I made an icon button to toggle the div to make it bigger (fullscreen-like). The animation code currently works this way:

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}),
])))

This doesn't work as expected since for the first step (small => lage) the width is not animated, and for the reverse animation the translate is not either. I would like to do something "smoother" but I've been struggling for days to make it.

Here is a quick plunkr I made to show you what I did and the different things I tried (commented) (first plunkr don't judge me x)

Thanks for your help !

br.julien
  • 3,420
  • 2
  • 23
  • 44
Maeglin
  • 3
  • 1
  • 3

1 Answers1

2

I think you will be able to get the desired animation effects by not using keyframes and switching to using ease-in-out transitions. If you were to edit your plunkr with these changes to the states and graphAnimation trigger:

animations: [
        trigger('panelAnimation', [
            state('in', style({transform: 'translateX(0)'})),
            transition('void => *', animate('600ms ease-in', keyframes([
                style({opacity: 0, offset: 0}),
                style({opacity: 1, offset: 1.0})
            ])))
        ]),
        trigger('graphAnimation', [
            state('small', style({
              position: 'absolute', 
              right: 0, 
              width: '50%'
              transform: 'translateY(0px)'
            })),
            state('large', style({
                transform: 'translateY(-150px)',
                position: 'absolute',
                right: 0,
                width: '100%'
            })),
            transition('small => large', animate('600ms 0.2ms ease-in-out')),
            transition('large => small', animate('600ms 0.2ms ease-in-out'))


        ])
    ]

That should give you effect you are looking for. Alternatively you could look into using groups to allow independent animation timings.

Neil Hibbert
  • 852
  • 5
  • 10