Angular Animations Appearing on top of element it should be sliding into

Question

I have a div that is inside a list group that I am trying to have slide in/out based on the state of a toggle switch. The problem is, when the animation occurs, it goes in front of the div that I would expect it to be going behind for the appearance to be correct.

This is for Angular and Bootstrap 4. I have followed a tutorial on how to get started with Angular Animations and also tried to add styling to both the list group and the div (as well as in the controller) to adjust the z-index based on a few google searches that I completed.

The div that is animated is below.

<div class="list-group" style="z-index: 9">
   <div class="list-group-item">
      <!-- toggle switch is right here --->
      <div class="recurringSchedule border-top py-2" *ngIf="expense.recurring" [@slideInOut]>
         ...
      </div>
   </div>
</div>

The animation is defined within my controller like so.

@Component({
    selector: 'app-create',
    templateUrl: './create.component.html',
    styleUrls: ['./create.component.css'],
    animations: [
        trigger('slideInOut', [
          transition(':enter', [
            style({transform: 'translateY(-100%)', zIndex: '-5'}),
            animate('400ms ease-in', style({transform: 'translateY(0%)'}))
          ]),
          transition(':leave', [
            style({zIndex: '-5'}),
            animate('400ms ease-in', style({transform: 'translateY(-100%)'}))
          ])
        ])
    ]
})

I expect the recurringSchedule div to slide down and up based on the toggle switch state respectively behind the list group or list group item. But it slides up/down in front of the list group so you see the entire animation instead of part of it being hidden.

UPDATE

Per the request in the comments, I created a stackblitz that demonstrates the issue.

https://angular-z2lavg.stackblitz.io

@jcuypers I've been playing with z-index values since I noticed the issue because I thought the same thing. No combination has gotten me what I expect. I would expect to need to create the z-index value for the list group higher than the value for the animated div. — Mitch Evans
Maybe you can get some inspiration from here: stackoverflow.com/questions/16148007/… on how you can make things work — jcuypers
Sorry about that, never used before. Here you go, stackblitz.com/edit/angular-z2lavg — Mitch Evans

BrunoFenzl BrunoFenzl · Accepted Answer · 2019-04-14T20:48:30

The problem is that you are animating an element with position: relative. Positioned elements will allways have a higher z-index than static positioned elements. To fix this, I suggest wrapping your two p tags inside a div and giving it a position: relative and a higher z-index.

Here is your stackblitz with my changes: https://stackblitz.com/edit/angular-hdbzwg

Angular Animations Appearing on top of element it should be sliding into

1 Answers