Angular 出现在应该滑入的元素顶部的动画

Question

我有一个 div 在列表组中，我试图根据切换开关的状态滑动 in/out。问题是，当动画出现时，它会在 div 前面，我希望它会在后面以确保外观正确。

这是针对 Angular 和 Bootstrap 4. 我遵循了有关如何开始使用 Angular 动画的教程，并且还尝试为列表组和div（以及在控制器中）根据我完成的一些 google 搜索调整 z-index。

下面是动画的div

<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>

动画是在我的控制器中定义的。

@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%)'}))
          ])
        ])
    ]
})

我希望 recurringSchedule div 根据切换开关状态分别在列表组或列表组项后面上下滑动。但它会在列表组前面滑动 up/down，因此您可以看到整个动画，而不是隐藏其中的一部分。

更新

根据评论中的要求，我创建了一个演示该问题的 stackblitz。

https://angular-z2lavg.stackblitz.io

Answer 1

问题是您正在使用 position: relative 为元素设置动画。定位元素总是比静态定位元素有更高的 z-index。要解决此问题，我建议将您的两个 p 标签包装在 div 中并为其提供 position: relative 和更高的 z-index。

这是你的 stackblitz 和我的更改： https://stackblitz.com/edit/angular-hdbzwg

Angular 出现在应该滑入的元素顶部的动画

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

angular

bootstrap-4

angular-animations