Question

您好，这是我更新的code，其中包含左右滑动的动画。因此，我想看看是否可以在没有任何动画的情况下控制默认状态。就像当面板为“ TRUE”时不应该有任何动画，并且当我们单击按钮时，动画应该照常工作。

我现在能够控制滑块的默认状态，但是仍需要查看按钮。

此外，我也为按钮添加了相同的代码。而且它对按钮不起作用。如果我们对按钮使用注释的代码，那么它可以工作，但是再次出现我不想要的动画。

Answer 1

您可以使用[@.disabled]="true"禁用动画来源：https://angular.io/api/animations/trigger#disabling-animations

示例：

<div class="container" [@slide]="isOpen ? true : false" [@.disabled]="true">

将禁用灰色框的滑动动画。

Answer 2

好！因此，在这里找到了一种在页面加载时也控制按钮状态的解决方案。

isOpenEver = false;

  get openCloseState(): string|undefined{
    if(!this.isOpenEver){
      return undefined;
    }
    return this.isOpen ? 'open' : 'closed';
  }

togglePanel(): void {
    this.isOpenEver = true;
    this.isOpen = !this.isOpen;
  }

并使用HTML按钮中的状态：

<button [class.button-resize-expand]="!isOpen"
          [class.button-resize-collapse]="isOpen"
          (click)="togglePanel()" [@openClose] ="openCloseState">
    <mat-icon class="rotate-chevron" [class.rotate-clicked]="!isOpen">{{isOpen ? 'chevron_left' : 'chevron_right'}}</mat-icon>
  </button>

这也是更新后的stackblitz

默认状态下没有角度动画

2 个答案: