CSS Child Margins do not Collapse while Angular Animation

user_13069305 0
Viewed 30

I have two vertical stacked parent-boxes which each have several children. These children have a set margin-top and margin-bottom. In a static environment these child-margins collapse.

The second parent-box is hidden by default and can be toggled via a button. Applying an angular animation to the second parent-box gives a weird behaviour, where the margins of the children do not collapse properly during the time of the animation.

I build a working minimal example of the issue here on Stackblitz

What causes this behaviour? Can i fix it without changing the html and the margins of the children? (just removing margin-top for example is not applicable in my case)

angular-animations angular margin css html
1 Answers

You can query for the children, remove their margin, the animate, and put back the margin (it's done implicitly)

Working example

export const ENTER_LEAVE_ANIMATION = trigger('enterLeaveAnimation', [
  transition(':enter', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemInvisibleStyle,
    animate('2000ms ease-out', itemVisibleStyle),
  ]),
  transition(':leave', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemVisibleStyle,
    animate('2000ms ease-in', itemInvisibleStyle),
  ]),
Admin1
Related