html - Angular 7 动画 - 过渡不起作用

Question

我查看了围绕同一问题的其他问题，但所提供的解决方案均不适合我。

我正在使用 Angular 7.2 和“@angular/animations”:“~7.2.0”。

我有一个要淡入和淡出的 div。所以我给它应用了一个不透明动画。同样的 div，我使用 *ngIf 添加它并从 HTML 中删除它。

问题是，动画样式(不透明度)得到正确应用，但它不能很好地从不透明度 1 > 0 或 0 > 1 过渡。

HTML:

<div *ngIf="divToShow.value !== 'none'" [@openClose]="openState">Dynamic Content Here</div>

动画:

animations: [
    trigger('openClose', [
      state('true', style({
        opacity: '1'
      })),
      state('false', style({
        opacity: '0'
      })),
      transition('true => false', [
        animate('10s')
      ]),
      transition('false => true', [
        animate('10s')
      ]),
    ]),
  ],

setter/getter :

public get openState(): string {
    if (this.divToShow.value !== 'none') {
      return 'true';
    } else {
      return 'false';
    }
  }

divToShow 将在不显示任何 div 时为“none”。当它确实需要显示一个 div 时，它会将 div 名称作为一个字符串。

你能告诉我这里做错了什么吗？

Answer 1

*ngIf="divToShow.value !== 'none'"

以上将删除 <div>当条件为false 时，但如果<div> 不能淡入或淡出不存在。

Angular 为您提供了一个过渡状态，以便在向 DOM 添加元素或从中删除元素时应用动画。

        trigger('openClose', [
            transition(':enter', [
                style({opacity: 0}),
                animate('10s', style({opacity: 1}))
            ]),
            transition(':leave', [
                style({opacity: 1}),
                animate('10s', style({opacity: 0}))
            ])
        ])

参见:https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases