javascript - 不透明动画在 Angular 中不起作用，为什么？

Question

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

现在，当连接恢复到位时，我想让错误消息发生变化，然后在大约一秒钟后使其消失（将不透明度从 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)"))
    ])
  ]

HTML 代码：

<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>

标签： javascripthtmlcssangulartypescript