Javascript 不透明度动画在角度上不起作用，为什么？

场景：当与服务器的连接出现问题时，我正在尝试设置错误消息的动画；我已经成功地为它的一部分设置了动画，这使得文本在调整窗口大小时移动

现在，当连接重新就位时，我想更改错误消息，然后在大约一秒钟后使其消失（将不透明度从100%设置为0%）

除了不透明度部分，其他一切都正常。。。理想情况下，我希望文本元素也从DOM中消失，但到目前为止，即使是不透明动画也无法工作

有人知道我做错了什么吗

谢谢大家!

类型脚本代码：

animations: [
    trigger("changeWindowSize", [
      state(
        "open",
        style({
          top: "11px"
        })
      ),
      state(
        "close",
        style({
          top: "76px"
        })
      ),

      transition("open=>close", animate("200ms ease-in")),
      transition("close=>open", animate("200ms cubic-bezier(0.35, 0, 0.25, 1)"))

    ]),
    trigger("changeOpacity", [
      state(
        "opacity-1",
        style({
          opacity: "1"
        })
      ),
      state(
        "opacity-0",
        style({
          opacity: "0"
        })
      ),
      transition("opacity-1=>opacity-0", animate("200ms 1000ms ease-in")),
      transition("opacity-0=>opacity-1", animate("200ms 1000ms cubic-bezier(0.35, 0, 0.25, 1)"))
    ])
  ]

<mat-toolbar id="com-err" *ngIf="wsService.getConnectionError()" (window:resize)="onResize($event)"
             [@changeWindowSize]="windowWidthCurrent > 1240 ? 'open': 'close'">
  <mat-icon
    [ngStyle]="{'color': 'red', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}">
    warning
  </mat-icon><div>No Connection</div>
</mat-toolbar>

<mat-toolbar id="com-err" *ngIf="!wsService.getConnectionError()" (window:resize)="onResize($event)"
             [@changeWindowSize]="windowWidthCurrent > 1190 ? 'open': 'close'"
             [@changeOpacity]="'opacity-1'">
  <mat-icon
    [ngStyle]="{'color': 'green', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}">
    warning
  </mat-icon><div>Connection Reestablished</div>
</mat-toolbar>

HTML代码：

animations: [
    trigger("changeWindowSize", [
      state(
        "open",
        style({
          top: "11px"
        })
      ),
      state(
        "close",
        style({
          top: "76px"
        })
      ),

      transition("open=>close", animate("200ms ease-in")),
      transition("close=>open", animate("200ms cubic-bezier(0.35, 0, 0.25, 1)"))

    ]),
    trigger("changeOpacity", [
      state(
        "opacity-1",
        style({
          opacity: "1"
        })
      ),
      state(
        "opacity-0",
        style({
          opacity: "0"
        })
      ),
      transition("opacity-1=>opacity-0", animate("200ms 1000ms ease-in")),
      transition("opacity-0=>opacity-1", animate("200ms 1000ms cubic-bezier(0.35, 0, 0.25, 1)"))
    ])
  ]

<mat-toolbar id="com-err" *ngIf="wsService.getConnectionError()" (window:resize)="onResize($event)"
             [@changeWindowSize]="windowWidthCurrent > 1240 ? 'open': 'close'">
  <mat-icon
    [ngStyle]="{'color': 'red', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}">
    warning
  </mat-icon><div>No Connection</div>
</mat-toolbar>

<mat-toolbar id="com-err" *ngIf="!wsService.getConnectionError()" (window:resize)="onResize($event)"
             [@changeWindowSize]="windowWidthCurrent > 1190 ? 'open': 'close'"
             [@changeOpacity]="'opacity-1'">
  <mat-icon
    [ngStyle]="{'color': 'green', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}">
    warning
  </mat-icon><div>Connection Reestablished</div>
</mat-toolbar>

警告
没有联系
警告
重新建立连接

您在哪里将

@changeOpacity

的状态更改为

'opacity-0'

？它看起来只是硬编码为

'opacity-1'

。您在哪里将

@changepacity

的状态更改为

'opacity-0'

？它看起来像是硬编码为

'opacity-1'

。