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, Apr 14 '19 at 20:12
Maybe you can get some inspiration from here: https://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context on how you can make things work — jcuypers, Apr 14 '19 at 20:13
Sorry about that, never used before. Here you go, https://stackblitz.com/edit/angular-z2lavg — Mitch Evans, Apr 14 '19 at 20:36

score 2 · Accepted Answer · answered Apr 14 '19 at 20:48

2

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

answered Apr 14 '19 at 20:48

brubs

1,259
8
23

While that gets it behind the paragraphs, it's still visible above and below the paragraphs. Once it goes behind the paragraphs, I don't want it to be seen. – Mitch Evans Apr 14 '19 at 20:55
just use -50% instead of -100% and a longer time all solved -) – jcuypers Apr 14 '19 at 21:04
Can still see it. – Mitch Evans Apr 14 '19 at 21:14
Had to take it down to a measly 20% instead of 100% so it wouldn't show above the div. Not much animation left at that point. – Mitch Evans Apr 14 '19 at 21:29
the height of the P element. if you increase it manually you could increase it. or try to move up the class "on-top" in the hierarchy. not sure – jcuypers Apr 14 '19 at 21:31
`
` works for me, with 100%
– jcuypers Apr 14 '19 at 21:34
1

I got it by placing the recurringSchedule div in it's own list-group-item below the toggle switch box and adding on-top class to all the list-group-items above the recurringSchedule one. Thank you for the assistance. – Mitch Evans Apr 14 '19 at 21:43

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

1 Answers1