为什么 *ngFor 循环会破坏 Internet Explorer 中的边栏动画？

Question

我有一个在 Chrome 中运行良好但在 IE 中运行不佳的动画。我希望从浏览器 window 外部将一个面板滑入视图，然后一旦退出按钮或覆盖页面其余部分的 <div> 被单击，面板将动画离开屏幕并退出看法。然而，实际的结果是整个页面被转换，而不是特定的元素。

查看下面的演示：

Chrome（工作正常；动画流畅）：

IE（错误；整个页面已移动）：

编辑

所以我找到了发生这种情况的原因，这是因为 *ngFor 在 container 内部渲染 HTML 时。如果我完全删除 ngFor 和所有其他属性绑定，动画将按预期运行（如 Chrome GIF 中所示）。

我最初没有将此代码添加到问题中，因为我不认为某些 *ngFor 逻辑会破坏 CSS.

所以我的问题是，为什么 *ngFor 会破坏动画，我该如何修复它？

代码：

边栏-component.ts:

animations: [
    trigger('animateInOutTrigger', [
      transition(':enter', [
        style({ transform: 'translateX(0%)' }),
        animate('0.3s', style({ transform: 'translateX(-100%)' }))
      ]),
      transition(':leave', [
        animate('0.3s', style({ transform: 'translateX(0%)' }))
      ])
    ]),
    trigger('fadeScrim', [
      transition(':enter', [
        style({ transform: 'opacity: 0' }),
        animate('0.3s', style({ opacity: '1' }))
      ]),
      transition(':leave', [
        animate('0.3s', style({ opacity: '0' }))
      ]),
    ]),

边栏-component.html:

<div id="btn-scrim" *ngIf="windowWidth >= 768 && open" class="scrim" (click)="onCloseSideBar()" @fadeScrim></div>
<div *ngIf="windowWidth >= 768 && open" class="sidebar-wrapper">
  <div @animateInOutTrigger class="container">
    <div class="header">
      <span class="text">Claim Details</span>
      <span id="btn-close-sidebar-desktop" (click)="onCloseSideBar()">X</span>
    </div>
    <div class="claims claims-padding">
        <hr-claim-detail [id]="'claim-scroller-' + element.claim_id" *ngFor="let element of group.data" [element]="element (update)="updateAndClose()" [windowWidth]="windowWidth" [token]="token [logConfig]="logConfig">
        </hr-claim-detail>
  </div>
</div>

边栏-component.scss:

.sidebar-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  transform: translateX(100%);
  z-index: 2;
}

.container {
  height: 100%;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14);
  z-index: 2;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
}

.scrim {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .32);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.header {
  height: 56px;
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: white;
  position: relative;
  z-index: 2;
}

.text {
  font-size: 16px;
  font-weight: 500;
}

.claims {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  box-sizing: border-box;
  flex: 1;
}

.claims-padding {
  padding-bottom: 25vh;
}

STACKBLITZ 娱乐：https://stackblitz.com/edit/angular-ven7eu

我试过：

使用state来控制过渡而不是使用:enter和:leave
在没有 Angular 动画库和纯粹使用 CSS 条件类

其他信息：

Angular 核心 8.0.0
Angular Animations 8.0.0（我试过降级到旧版本并升级到最新的次要版本和补丁版本）

Answer 1

你能试着用一个 ng-container 包裹你的 *ngFor 循环吗？此元素由 Angular 团队发明，用于需要多次循环和创建元素的特殊情况，但样式不应受到 *ngFor 循环的影响。

<ng-container *ngFor="let element of group.data">
    <hr-claim-detail [id]="'claim-scroller-' + element.claim_id" [element]="element (update)="updateAndClose()" [windowWidth]="windowWidth" [token]="token [logConfig]="logConfig">
    </hr-claim-detail>
</ng-container>

Answer 2

通过使用 fixed 定位然后以编程方式将主内容容器的 margin-top 设置为 getBoundingClientRect().top 已解决此问题。

我仍然不明白为什么在这种情况下使用 absolute 定位不起作用。

为什么 *ngFor 循环会破坏 Internet Explorer 中的边栏动画？

Why is an *ngFor loop breaking my sidebar animation in Internet Explorer?

animation

internet-explorer

angular

angular-animations