angular - ngif 上的动画 SCSS

Question

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

现在我的动画完全按照我希望的方式工作，但这是让我疯狂的部分:当元素在页面上移动时出现视觉冲击。 html 上有一个 ngIf 条件，它只允许 block 在包含元素时呈现。我在页面上看到的视觉冲击来自添加到 DOM 的 div。添加 div 后，它会将其下方的元素向下移动约 10-20 像素。

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

这是 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 }
  )

])

]);

Answer 1

将包装器 div 添加到包含 *ngIf 的 div，如下所示:

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

  </div>
</div>

然后向包装器添加一个最小高度:

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

这将停止或最小化跳跃。