Question

我正在使用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 }
  )

])

]）;

Answer 1

将包装器div添加到包含* ngIf的div中，

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

  </div>
</div>

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

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

这将停止或最小化跳跃。

Answer 2

使用<ng-container>。它将解决您的问题。

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

有关更多信息，请概览here

Ngif上的动画混蛋

2 个答案: