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

我有一个动画，在Chrome中效果很好，但在IE中效果不好。我希望将一个面板从浏览器窗口外滑入视图，然后单击退出按钮或覆盖页面其余部分的

，面板将在屏幕外和视图外进行动画制作。但是，实际结果是整个页面被转换，而不是特定元素。

查看以下演示：

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

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

编辑

因此，我找到了发生这种情况的原因，这是因为在

容器中呈现HTML时出现了
*ngFor
。如果我完全删除
ngFor
和所有其他属性绑定，动画将按预期运行（如Chrome GIF所示）

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

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

代码：

侧杆-构件.ts：

side-bar-component.html：

STACKBLITZ娱乐：

我试过：


使用
状态
来控制转换，而不是使用
：输入
和
：离开
不使用Angular animations库和CSS条件类执行相同的功能

其他资料：


角磁芯8.0.0
Angular Animations 8.0.0（我尝试过降级到旧版本，升级到最新的次要版本和补丁版本）
你能试着在你的*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>

通过使用
fixed
定位，然后通过编程将
margin top
设置为等于主内容容器的
getBoundingClientRect（）.top
来解决问题

我仍然不明白为什么在这个场景中使用
绝对
定位不起作用。
我在stackblitz中用您的代码对我进行了测试。IE中的结果如下：。边缘也是一样的。我认为面板的动画效果很好。你的意思是当面板进出时，
和
会移动一点吗？@YuZhou是的，stackblitz动画在IE/Edge中运行良好，我认为我的代码有问题。我认为这可能是FPS的问题。我将进一步调查。19年7月30日-问题更新；上面的评论是不相关的。我用你提供的代码做了一个演示，但我无法重现这个问题。页面为空：。代码片段中有什么遗漏吗？是的@YuZhou你是对的，有一些遗漏的代码，我现在已经添加到问题中，还有一个新的Stackblitz:。奇怪的是，动画没有正确触发，我将进一步调查。IMO，在您的解决方案查找过程中存在问题。“为什么”和“Internet explorer”不能放在同一句话中，因为你自己的精神安全。。。
<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>

.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;
}

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