时间戳

首页 > 解决方案 > 角度动画出现在它应该滑入的元素顶部

angular - 角度动画出现在它应该滑入的元素顶部

问题描述

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

这适用于 Angular 和 Bootstrap 4。我遵循了一个关于如何开始使用 Angular Animations 的教程，并且还尝试将样式添加到列表组和 div（以及控制器中）以调整基于 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%)'}))
          ])
        ])
    ]
})

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

更新

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

https://angular-z2lavg.stackblitz.io

标签： angularbootstrap-4angular-animations

解决方案

问题是您正在使用 为元素设置动画position: relative。定位元素总是比静态定位元素具有更高的 z-index。为了解决这个问题，我建议将你的两个标签包装p在一个 div 中，并给它position: relative一个更高的 z-index。

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

推荐阅读