ngif上的动画混蛋答案

【问题标题】：animation jerks on ngifngif上的动画混蛋
【发布时间】：2018-09-10 17:40:11
【问题描述】：

我正在使用 Angular 6 为列表制作动画。这里的想法是我想单击一个字幕部分，然后让 div 向下滑动到它的最后一个元素，首先呈现列表的整个高度。之后选项将淡入保留空间。

现在我的动画效果完全符合我的要求，但让我发疯的部分是：页面上的元素移动时会出现视觉上的抖动。 html 上有一个 ngIf 条件，它只允许块在它有元素的情况下呈现。我看到的页面上的视觉抖动来自被添加到 DOM 的 div。添加 div 后，它会将其下方的元素向下移动约 10-20px。

我尝试使用高度大致相同的不间断空格块，但这似乎夸大了响应，只会使它看起来更糟——一个元素不会消失/出现，直到动画元素完成其序列。有什么想法吗？

这是 html 示例：

 <div class="uploaded-files"  [@fadeAnimation]="getToggleState()">
<div *ngFor="let document of documentation">
  <div *ngIf="getToggleState()" class="uploaded-file-iterator">
    <div class="uploaded-filenames">{{document.fileName}}</div>
    <button mat-button (click)="removeDocument(document.uploadId)" class="warn-ctrl-btn">
      <i class="fa fa-times-circle"></i>
    </button>
  </div>
</div>

这是动画：

trigger('fadeAnimation', [

transition( '* => *', [

  query(':enter',
    [
      style({ opacity: 0, height: 0 })
    ],
    { optional: true }
  ),

  query(':leave',
    [
      style({ opacity: 1, height: '*' }),
      sequence([
        animate('0.4s', style({ opacity: 0 })),
        animate('0.5s', style({ height: 0 })),
      ])
    ],
    { optional: true }
  ),

  query(':enter',
    [
      style({ opacity: 0, height: 0 }),
      sequence([
        animate('.4s', style({ height: '*' })),
        animate('.5s', style({ opacity: 1 }))
      ])
    ],
    { optional: true }
  )

])

]);

【问题讨论】：

标签： angular animation

【解决方案1】：

向包含 *ngIf 的 div 添加一个包装器 div，如下所示：

<div class="my-wrapper">
  <div *ngIf="blah">

  </div>
</div>

然后在包装器中添加一个最小高度：

.my-wrapper {
   min-height: 30px;
}

这将停止或最小化跳跃。

【讨论】：

【解决方案2】：

使用<ng-container>。它会解决你的问题。

<ng-container *ngIf="foo">
    <ng-container *ngIf="bar">
        ...
    </ng-container>
</ng-container>

欲了解更多信息，请浏览here

【讨论】：