Question

我有一个div在列表组中，我试图根据拨动开关的状态将其滑入/滑出。问题是，当动画发生时，它位于div的前面，我希望它会落后于外观正确。

这是针对Angular和Bootstrap 4的。我遵循了有关如何开始使用Angular Animations的教程，并且还尝试将样式添加到列表组和div（以及在控制器中）以调整z -index基于我完成的一些Google搜索。

动画的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分别基于列表组或列表组项目后面的切换开关状态上下滑动。但是它在列表组的前面向上/向下滑动，因此您可以看到整个动画，而不是隐藏其中的一部分。

更新

根据注释中的请求，我创建了一个堆栈闪电来演示该问题。

https://angular-z2lavg.stackblitz.io

Answer 1

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

这是您对我所做的更改的快速反应： https://stackblitz.com/edit/angular-hdbzwg

Angular Animations应该出现在元素顶部

1 个答案: