Angular 动画创建了太多元素

Question

我想创建一个组件，它取决于它的属性（点击按钮时会发生变化），显示两个 div 之一（在 'enter' 和 'leave' 时对它们进行动画处理） ). 代码和演示：

@Component({
  selector: 'my-app',
  template: `

  <button (click)="show = !show">change</button><br><br>

  <div @trigger *ngIf="show" style="width: 200px; height:200px;  background: rgba(0,0,0,.3);"></div>
  <div @trigger *ngIf="!show" style="width: 200px; height:200px;  background: red">

  </div>  
  `,
  animations: [
 trigger('trigger', [
      transition(':enter', [
        style({ width: '0' }),
        animate('3s ease-in', style({ width: '*' })),
      ]),
      transition(':leave', [
        animate('3s ease-in', style({ width: '0' }))
      ])
    ]),
  ]
})

export class AppComponent { 
  show: false;
}

https://stackblitz.com/edit/angular-2p2czs

上面我已经发布了示例代码，但是它以一种奇怪的方式工作。如果动画足够长并且我快速单击按钮几次，它会创建超过 2 个 div，这不是我想要实现的。任何想法如何解决这一问题？当属性发生变化而 div 仍在动画中时，我希望它们从当前状态回滚动画（不知道是否可能）。

Answer 1

code+demo

发生这种情况是因为您的动画 insert/remove div 它 starts/ends。

这种动画有一个技巧，如果你不想Angular创建很多divs，你可以通过在你的动画上使用状态来做到这一点，这样，没有 DOM 是 created/removed，只是修改了样式。

<div [@trigger]="show ? 'visible' : 'hidden'"></div>
<div [@trigger]="!show ? 'visible' : 'hidden'"></div>

    trigger('trigger', [
      state('hidden', style({
        display: 'none',
      })),
      transition('hidden -> visible', [
        style({
          display: 'block',
          width: 0,
        }),
        animate('.5s ease', style({
          width: '*',
        }))
      ]),
      transition('visible -> hidden', [
        animate('.5s ease', style({
          width: 0,
        })),
      ])
    ]),

Angular 动画创建了太多元素

Angular animation creating too many elements

angular

typescript

angular-animations