CODEWITHSUNDEEP
cssangularangular-animations
akcasoy
akcasoy

Reputation: 7215

Angular Animation: padding is not animated with height 0->*

I have written a drawer animation with Angular. Looks like this:

  transition(':enter', [
    style({height: '0', opacity: 0}),

    group([
      animate(300, style({height: '*'})),
      animate('300ms ease-in-out', style({'opacity': '1'}))
    ])

  ]) ,
  transition(':leave', [
    style({height: '*', opacity: 1}),

    group([
      animate(300, style({height: 0})),
      animate('300ms ease-in-out', style({'opacity': '0'}))
    ] )
    ])

My main div (where this animation is sticked to) has also a padding (20px for all 4 directions).

The problem: As soon as the div is visible (via *ngIf), my height animation starts working. But the padding of the element is immediately there.. The rest will be animated. So it has a flickering effect at the beginning of animation.

How can i get also padding to be animated? Or should i change anything else?

Upvotes: 1

Views: 2549

Answers (1)

mik.corcuera
mik.corcuera

Reputation: 126

To achieve a smooth animation on the height of the div you should also animate the padding-top and padding-bottom properties:

transition(':enter', [
  style({height: '0', opacity: 0, 'padding-top': '0', 'padding-bottom': '0'}),

  group([
    animate(300, style({height: '*', 'padding-top': '*', 'padding-bottom': '*'})),
    animate('300ms ease-in-out', style({'opacity': '1'}))
  ])

]) ,
transition(':leave', [
  style({height: '*', opacity: 1, 'padding-top': '*', 'padding-bottom': '*'}),

  group([
    animate(300, style({height: 0, 'padding-top': 0, 'padding-bottom': 0})),
    animate('300ms ease-in-out', style({'opacity': '0'}))
  ] )
])

Upvotes: 8

Related Questions