默认状态下没有角度动画

Question

嗨，这里是我更新的代码 ，其中包含左右滑动动画。 所以我想看看我们是否可以在没有任何动画的情况下控制默认状态。 就像当面板为“TRUE”时不应该有任何动画，当我们点击按钮时，动画应该像往常一样工作。

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

另外，我也为按钮添加了相同的代码。 它不适用于按钮。 如果我们使用按钮的注释代码它可以工作但是第一次有动画我不想要。

Answer 1

您可以使用[@.disabled]="true"禁用动画来源： https ： [@.disabled]="true"

样品：

<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