Angular 动画创建了太多元素答案

【问题标题】：Angular animation creating too many elementsAngular 动画创建了太多元素
【发布时间】：2019-01-14 05:47:44
【问题描述】：

我想创建一个组件，该组件取决于其属性（单击按钮时会发生变化），显示两个 div 之一（在它们“进入”和“离开”时为它们设置动画）。代码和演示：

@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 仍在动画时属性更改时，我希望它们从当前状态回滚动画（不知道它是否可能）。

【问题讨论】：

@DavidWalschots 建议把代码贴出来，最后再添加一个demo项目。
@DavidWalschots 我没有说他不应该把代码放在问题中，请再读一遍。我什至说这是推荐的做法。
我还要补充一点，作为回答问题的用户，那些 Stackblitz 非常有用。之所以不强制，只是因为它们是外部资源，随时可能宕机。
这个问题标题“Angular 创建太多元素”是什么？

标签： angular typescript angular-animations

【解决方案1】：

code+demo

发生这种情况是因为您的动画插入/删除 div 开始/结束。

这种动画有一个技巧，如果你不想让 Angular 创建很多 div，你可以通过在你的动画上使用状态来做到这一点，这样就不会创建/删除 DOM，只修改样式。

<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,
        })),
      ])
    ]),

【讨论】：