Angular 7 动画 - 过渡不起作用答案

【问题标题】：Angular 7 animations - Transition not workingAngular 7 动画 - 过渡不起作用
【发布时间】：2019-12-04 02:28:19
【问题描述】：

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

我正在使用 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')
      ]),
    ]),
  ],

吸气剂：

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

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

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

【问题讨论】：

标签： html css angular animation

【解决方案1】：

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

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

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

【讨论】：