Angular Animations - fade in / out works for DIVs, not fully for child components (not sure if bug)

[dreamstar-enterprises]

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

No

Description

In Angular 17,

My parent has this animation

Parent Component - animation configuration

 animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('150ms', style({ opacity: 0 })),
      ]),
    ]),
  ],

View html element - fully works

When I apply it to the html in the template, this works fine:

   @if(showIcon) {

      <span class="material-symbols-outlined" [@fadeInOut]>
        check_circle
      </span>

    }

Child Component - half works (on fadeIn only)

When applied to a child component though, it only works on the fade in, and immediately cuts out, instead of fades out, when the boolean in the outer @if, switches back to false.

    @if(showChildComponent){
      <app-child-component
        [@fadeInOut]
        [someInput]="Input"
        (someEvent)="handleEvent($event)"/>
    }
  }

Is this a bug, or is my approach wrong?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please see description and code example above.

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

This could be my lack of knowledge, rather than a bug.

[dreamstar-enterprises]

I find that if the child component is this, the backdrop fades in as normal, but the modal, snaps into existence.
And the backdrop fades out as normal, but the modal, snaps out, when the backdrop has fully faded out. The two divs are independent, and not nested one into the other.

Child component

<div role="document" class="main-modal" (click)="stopPropogation($event)">

  <!-- Modal Container Main -->
  <div class="modal-main-container">

    <!-- Modal Header -->
    <div class="modal-header-container">
      <div class="modal-header">
        <span>{{ modalTitle() }}</span>
        <app-close-button (buttonClick)="close($event)"/>
      </div>
    </div>

    <!-- Modal Body & Modal Footer -->
    <!-- router specific html template rendering logic -->
    @switch(modalContent()){
      @case ('Contract') {
        <ng-container *ngTemplateOutlet="contractBodyAndFooter"></ng-container>
      }
      @default {
        <p>Invalid Menu Content</p>
      }
    }

  </div>

</div>

<!-- Modal Confirm Back Drop -->
<div class="element-backdrop" (click)="close($event)">
</div>

Here is the child css too

/* element backdrop */

.element-backdrop {
  width: 100%;
  height: 100%;
  background-color: var(--modal-backdrop-color);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* main modal styles */

.main-modal{
  position: absolute;
  z-index: 4;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
  max-height: var(--modal-max-height);
  width: 330px;
  height: auto;
  border: none;
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0 15px 50px 0 var(--modal-box-shadow-color)
}

/* main container styles */

.modal-main-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* header styles */

.modal-header-container {
  display: flex;
}

.modal-header {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 7px 16px;
  color: var(--modal-text-title-color);
  font-size: 0.93rem;
  font-weight: bold;
  border-bottom: 1px solid var(--modal-header-border-bottom-gray-color);
}

.modal-header-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* body styles */

.modal-body-container {
  padding: 12px 10px 12px 10px;
  height: auto;
  flex-grow: 1;
  overflow-y: auto;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.93rem;
}

/* divider styles */

.horizontal-divider {
  border-top: 1px solid var(--modal-horizontal-divider-gray-color);
  border-color: var(--modal-horizontal-divider-gray-color);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}

/* footer styles */

.modal-footer-container {
  padding: 10px 20px 10px 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

[dreamstar-enterprises]

This was a css bug. I was using position static, rather than a position that is not static. The z-index because of this was having no effect. Resolved.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}