Question

我想创建一个依赖于其属性（在单击按钮时会更改）的组件，该组件显示两个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仍处于动画状态时，我希望它们从当前状态回滚动画（不知道它是否可行）。

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

角动画创建太多元素

1 个答案: