CSS Child Margins do not Collapse while Angular Animation

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)

1 answer

  • answered 2022-05-04 09:55 temp_user

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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum